@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; src: url(./fonts/NotoSansKR-Thin.woff2) format('woff2'), url(./fonts/NotoSansKR-Thin.woff) format('woff'), url(./fonts/NotoSansKR-Thin.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(./fonts/NotoSansKR-Light.woff2) format('woff2'), url(./fonts/NotoSansKR-Light.woff) format('woff'), url(./fonts/NotoSansKR-Light.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(./fonts/NotoSansKR-Regular.woff2) format('woff2'), url(./fonts/NotoSansKR-Regular.woff) format('woff'), url(./fonts/NotoSansKR-Regular.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(./fonts/NotoSansKR-Medium.woff2) format('woff2'), url(./fonts/NotoSansKR-Medium.woff) format('woff'), url(./fonts/NotoSansKR-Medium.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(./fonts/NotoSansKR-Bold.woff2) format('woff2'), url(./fonts/NotoSansKR-Bold.woff) format('woff'), url(./fonts/NotoSansKR-Bold.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(./fonts/NotoSansKR-Bold.woff2) format('woff2'), url(./fonts/NotoSansKR-Bold.woff) format('woff'), url(./fonts/NotoSansKR-Bold.otf) format('opentype'); } @font-face { font-family: 'Gmarket Sans'; font-style: normal; font-weight: 700; src: url(./fonts/GmarketSansBold.woff2) format('woff2'), url(./fonts/GmarketSansBold.woff) format('woff'), url(./fonts/GmarketSansBold.otf) format('opentype'); } @font-face { font-family: 'Gmarket Sans'; font-style: normal; font-weight: 500; src: url(./fonts/GmarketSansMedium.woff2) format('woff2'), url(./fonts/GmarketSansMedium.woff) format('woff'), url(./fonts/GmarketSansMedium.otf) format('opentype'); } @font-face { font-family: 'Gmarket Sans'; font-style: normal; font-weight: 300; src: url(./fonts/GmarketSansLight.woff2) format('woff2'), url(./fonts/GmarketSansLight.woff) format('woff'), url(./fonts/GmarketSansLight.otf) format('opentype'); } @font-face { font-family: 'GyeonggiBatang'; src: url('./fonts/GyeonggiBatang_Bold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Handletter'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_05@1.0/Handletter.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SDMiSaeng'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SDMiSaeng.woff') format('woff'); font-weight: normal; font-style: normal; } * {margin:0;padding:0;} html, body{height:100%;letter-spacing:-0.025em;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-size-adjust:none;} body{font-family:'Noto Sans KR', sans-serif;font-weight:300;font-size:12px;color:#404758;} header, section, nav, article, aside, details, figcaption, figure, hgroup, menu, footer {display:block;} h1, h2, h3, h4, h5, h6{font-weight:400;font-size:100%} ul, ol, li{list-style:none;} dl, dd, dt{ padding:0; margin:0;} fieldset, img{border:none;} img{vertical-align:top;} em {font-style:normal;} table{width:100%;border-collapse:collapse;} th {font-weight:400;} td {color:#222;} legend {position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;padding:0;visibility:hidden;text-indent:-9999px;} caption {width:0;height:0;overflow:hidden;padding:0;font-size:0;line-height:0;} .hidden {font-size:0;line-height:0;text-indent:-99999px;} .clear:after {display:block;content:'';clear:both;} input, select{font-weight:300;font-family:'Noto Sans KR', sans-serif;vertical-align:middle;color:#777;border:1px solid #ddd;} textarea {resize:none;border:1px solid #afafaf;padding:5px;font-family:'Noto Sans KR', sans-serif;font-size:12px;} a{text-decoration:none;color:#333;} a:foucs {border:1px solid red;outline: inherit;} button {border: 0; background: none; cursor: pointer;} .ff{font-family: 'SDMiSaeng'; font-size:30px;} .al { text-align:left;} .ar { text-align:right;} .ac { text-align:center;} .aa { text-align:justify;} .fl{ float:left;} .fr{float:right;} .vt { vertical-align:top;} .vm { vertical-align:middle;} .vb { vertical-align:bottom;} .vv { vertical-align:baseline;} h1 { font-weight:600;} h2 { font-weight:600;} h3 { font-weight:600;} h4 { font-weight:600;} h5 { font-weight:600;} h6 { font-weight:600;} .fw300{ font-weight:300;} .fw400{ font-weight:400;} .fw500{ font-weight:500;} .fwb{ font-weight:bold} /* 폰트컬러*/ .fc01{ color:#777;} .fc02{ color:#fff;} .fc03{ color:#999;} .fc04{ color:#0069b2;} .fc05{ color:#6bb00e;} .fc06{ color:#fefb00;} .fc07{ color:#00a651;} .fc08{ color:#333;} .fc09{ color:#C03;} .fc10{ color:#8e8e8e;} .fc11{ color:#df526f} .fc12{ color:#c17a31} .fc13{ color:#da5c10} .fc14{ color:#fa5e41} .fc15{ color:#0099e3} .fc16{ color:#f84913} .fc17{ color:#9a4f50} /* 폰트사이즈*/ .fs11{ font-size:11px;} .fs12{ font-size:11px;} .fs13{ font-size:13px;} .fs14{ font-size:14px;} .fs15{ font-size:15px;} .fs16{ font-size:16px;} .fs17{ font-size:17px;} .fs18{ font-size:18px;} .fs19{ font-size:19px;} .fs20{ font-size:20px;} .fs21{ font-size:21px;} .fs22{ font-size:22px;} .fs23{ font-size:23px; line-height:30px;} .fs24{ font-size:24px;} .fs25{ font-size:25px; line-height:35px;} .fs26{ font-size:26px;} .fs27{ font-size:27px;} .fs28{ font-size:28px;} .fs29{ font-size:29px;} .fs30{ font-size:30px !important; line-height:40px; letter-spacing:-2px;} .fs31{ font-size:31px;letter-spacing:-2px;} .fs32{ font-size:32px;letter-spacing:-2px;} .fs33{ font-size:33px;letter-spacing:-2px;} .fs34{ font-size:34px;letter-spacing:-2px;} .fs35{ font-size:35px; line-height:45px;letter-spacing:-2px;} .fs36{ font-size:36px;letter-spacing:-2px;} .fs37{ font-size:37px; line-height:47px;letter-spacing:-2px;} .fs38{ font-size:38px;letter-spacing:-2px;} .fs39{ font-size:39px;letter-spacing:-2px;} .fs40{ font-size:40px; line-height:50px;letter-spacing:-3px;} .fs45{ font-size:45px; line-height:55px;letter-spacing:-2px;} .fs50{ font-size:50px; line-height:60px;letter-spacing:-3px;} .fs60{ font-size:60px; line-height:75px;letter-spacing:-3px;} .fs70{ font-size:70px; line-height:85px;letter-spacing:-4px;} .fs80{ font-size:80px; line-height:95px;letter-spacing:-4px;} .fs90{ font-size:90px;} .fs100{font-size:100%;} .fs110{font-size:110%;} .fs120{font-size:120%;} .fs130{font-size:130%;} .fs140{font-size:140%;} .fs150{font-size:150%;} .fs160{font-size:160%;} .fs170{font-size:170%;} .fs180{font-size:180%;} .fs190{font-size:190%;} .fs200{font-size:200%;} .fs210{font-size:210%;} .fs220{font-size:220%;} .fs230{font-size:230%;} .fs240{font-size:240%;} .fs250{font-size:250%;} .fs260{font-size:260%;} .fs270{font-size:270%;} .fs280{font-size:280%;} .fs290{font-size:290%;} .fs300{font-size:300%;} /* margin setting */ .mg00 { margin:0 !important;} .mg05 { margin:5px;} .mg10 { margin:10px;} .mg15 { margin:15px;} .mg20 { margin:20px;} .mg25 { margin:25px;} .mg30 { margin:30px;} .mg35 { margin:35px;} .mg40 { margin:40px;} .mg45 { margin:45px;} .mg50 { margin:50px;} .mg70 { margin:70px;} .mt00{ margin-top:0 !important;} .mt05{ margin-top:5px;} .mt10{ margin-top:10px;} .mt15{ margin-top:15px;} .mt20{ margin-top:20px;} .mt25{ margin-top:25px;} .mt30{ margin-top:30px;} .mt35{ margin-top:35px;} .mt40{ margin-top:40px;} .mt45{ margin-top:45px;} .mt50{ margin-top:50px;} .mt60{ margin-top:60px;} .mt70{ margin-top:70px;} .mt80{ margin-top:80px;} .mt90{ margin-top:90px;} .mt100{ margin-top:100px;} .mt150{ margin-top:150px;} .mt-5{margin-top:-5px !important;} .mt-10{margin-top:-10px !important;} .mt-15{margin-top:-15px !important;} .mt-20{margin-top:-20px !important;} .mt-25{margin-top:-25px !important;} .mt-30{margin-top:-30px !important;} .mt-35{margin-top:-35px !important;} .mt-40{margin-top:-40px !important;} .mt-45{margin-top:-45px !important;} .mt-50{margin-top:-50px !important;} .ml00{ margin-left:0 !important;} .ml05{ margin-left:5px;} .ml10{ margin-left:10px;} .ml15{ margin-left:15px;} .ml20{ margin-left:20px;} .ml25{ margin-left:25px;} .ml30{ margin-left:30px;} .ml35{ margin-left:35px;} .ml40{ margin-left:40px;} .ml45{ margin-left:45px;} .ml50{ margin-left:50px;} .mr00{ margin-right:0 !important;} .mr05{ margin-right:5px;} .mr10{ margin-right:10px;} .mr15{ margin-right:15px;} .mr20{ margin-right:20px;} .mr25{ margin-right:25px;} .mr30{ margin-right:30px;} .mr35{ margin-right:35px;} .mr40{ margin-right:40px;} .mr45{ margin-right:45px;} .mr50{ margin-right:50px;} .mb00{ margin-bottom:0 !important;} .mb05{ margin-bottom:5px;} .mb10{ margin-bottom:10px;} .mb15{ margin-bottom:15px;} .mb20{ margin-bottom:20px;} .mb25{ margin-bottom:25px;} .mb30{ margin-bottom:30px;} .mb35{ margin-bottom:35px;} .mb40{ margin-bottom:40px;} .mb45{ margin-bottom:45px;} .mb50{ margin-bottom:50px;} .mb60{ margin-bottom:60px;} .mb70{ margin-bottom:70px;} .mb80{ margin-bottom:80px;} .mb90{ margin-bottom:90px;} .mb100{ margin-bottom:100px;} .mb150{ margin-bottom:150px;} /* padding setting */ .pd00 { padding:0 !important;} .pd05 { padding:5px;} .pd10 { padding:10px;} .pd15 { padding:15px;} .pd20 { padding:20px;} .pd25 { padding:25px;} .pd30 { padding:30px;} .pd35 { padding:35px;} .pd40 { padding:40px;} .pd45 { padding:45px;} .pd50 { padding:50px;} .pd70 { padding:70px;} .pd100 { padding:100px;} .pt00{ padding-top:0 !important;} .pt05{ padding-top:5px;} .pt10{ padding-top:10px;} .pt15{ padding-top:15px;} .pt20{ padding-top:20px;} .pt25{ padding-top:25px;} .pt30{ padding-top:30px;} .pt35{ padding-top:35px;} .pt40{ padding-top:40px;} .pt45{ padding-top:45px;} .pt50{ padding-top:50px;} .pt55{ padding-top:55px;} .pt60{ padding-top:60px;} .pt70{ padding-top:70px;} .pt80{ padding-top:80px;} .pt90{ padding-top:90px;} .pt100{ padding-top:100px;} .pt150{ padding-top:150px;} .pl00{ padding-left:0 !important;} .pl05{ padding-left:5px;} .pl10{ padding-left:10px;} .pl15{ padding-left:15px;} .pl20{ padding-left:20px;} .pl25{ padding-left:25px;} .pl30{ padding-left:30px;} .pl35{ padding-left:35px;} .pl40{ padding-left:40px;} .pl45{ padding-left:45px;} .pl50{ padding-left:50px;} .pr00{ padding-right:0 !important;} .pr05{ padding-right:5px;} .pr10{ padding-right:10px;} .pr15{ padding-right:15px;} .pr20{ padding-right:20px;} .pr25{ padding-right:25px;} .pr30{ padding-right:30px;} .pr35{ padding-right:35px;} .pr40{ padding-right:40px;} .pr45{ padding-right:45px;} .pr50{ padding-right:50px;} .pb00{ padding-bottom:0 !important;} .pb05{ padding-bottom:5px;} .pb10{ padding-bottom:10px;} .pb15{ padding-bottom:15px;} .pb20{ padding-bottom:20px;} .pb25{ padding-bottom:25px;} .pb30{ padding-bottom:30px;} .pb35{ padding-bottom:35px;} .pb40{ padding-bottom:40px;} .pb45{ padding-bottom:45px;} .pb50{ padding-bottom:50px;} .pb60{ padding-bottom:60px;} .pb70{ padding-bottom:70px;} .pb80{ padding-bottom:80px;} .pb90{ padding-bottom:90px;} .pb100{ padding-bottom:100px;} .pb150 {padding-bottom:150px;} .ffG{font-family: 'Gmarket Sans';} .fsi{ font-style:italic;} #wrap {width:100%;height:100%;margin:auto;position:relative} #content { letter-spacing:-1px;} .mainContents{ font-size:19px; word-break:keep-all; } #content .subContent {font-size:21px;word-break:keep-all ;padding-top:150px; color:#555;} /*본문*/ #content .subContent h3.subTitleSubject { position:relative;font-size:47px; margin-bottom:70px; padding-bottom:20px; color:#222;} #content .subContent h3.subTitleSubject:before{ content:''; position:absolute; top:-20px;left:-40px;width:75px; height:75px; background:url(./image/main/visual_wrap_icon.png) 50% 50% no-repeat; background-size:cover;transform: rotate(-25deg); z-index:-1;} #content .subContent #location{ position:absolute; top:0; right:0; } #content .subContent #location a{ font-weight:400;} /*--서브메뉴--*/ #content .snb { position:absolute; bottom:0; width:100%; } #content .snb .snbBottom {padding:0px;margin-top:10px} #content .snb .mybox {margin-bottom:10px} #content .snb .mybox {border:#D4D4D4 solid 1px;} #content .snb .mybox .login .mbrinfo {background:#F4F4F4;padding:0;border-bottom:#dfdfdf solid 1px;position:relative;height:80px;} #content .snb .mybox .login .symbol {position:absolute;top:5px;left:5px;} #content .snb .mybox .login .symbol img {width:37px;height:37px;border:1px #c0c0c0 solid} #content .snb .mybox .login .namel {position:absolute;top:30px;left:55px;width:120px;height:12px;font-weight:bold;color:#454545;} #content .snb .mybox .login .namer {position:absolute;top:5px;left:55px;width:108px;height:12px;font-weight:bold;color:#454545;} #content .snb .mybox .login .score {position:absolute;bottom:12px;left:10px;font-size:11px;font-family:verdana;color:#636363;padding-top:3px;letter-spacing:-1px} #content .snb .mybox .login .tabbox {} #content .snb .mybox .login .tabbox .tp {float:left;width:60px;height:24px;line-height:24px;background:#F4F4F4;border-top:#ffffff solid 1px;border-bottom:#D4D4D4 solid 1px;text-align:center;font-weight:bold;color:#9E9E9E;cursor:pointer;position:relative} #content .snb .mybox .login .tabbox .tp span.mcounter { font-weight:normal; font-size:11px; color:#F21914;letter-spacing:-1px;position:absolute;top:-10px;right:2px;font-family:arial; border-radius:12px;background-color:#ff6000;height:14px;padding:0 5px;color:#fff;line-height:14px; box-shadow:1px 1px 3px #ccc; } #content .snb .mybox .login .tabbox .tp span.mcounter1 { font-weight:normal; font-size:11px; color:#F21914;letter-spacing:-1px;position:absolute;top:-10px;right:2px;font-family:arial; border-radius:12px;background-color:#999;height:14px;padding:0 5px;color:#fff;line-height:14px; box-shadow:1px 1px 3px #ccc; } #content .snb .mybox .login .tabbox .vline {border-right:#D4D4D4 solid 1px;} #content .snb .mybox .login .tabbox .on {background:#ffffff;border-top:#ffffff solid 1px;border-bottom:#ffffff solid 1px;color:#676767;} #content .snb .mybox .login .lbody {padding:8px;} #content .snb .mybox .login .lbody ul {padding:0;margin:0;list-style-type:none;} #content .snb .mybox .login .lbody li {padding:4px 0;line-height:130%;} #content .snb .mybox .login .lbody li a {font-family:dotum;font-size:11px;letter-spacing:-1px;line-height:130%} #content .snb .mybox .login .lbody li .comment {font-family:arial;font-size:11px;color:#E75801;padding-left:3px;} #content .snb .mybox .login .lbody li .new {font-family:arial;font-size:10px;color:#ff0000;} #content .snb .mybox .login .lbody li .reply {font-family:dotum;font-size:11px;color:#888888;letter-spacing:-1px} #content .snb .mybox .login .lbody li .pic {float:left;width:35px;} #content .snb .mybox .login .lbody li .info {float:left;width:130px;} #content .snb .mybox .login .lbody li a.lbmore {display:block;text-align:center;border:1px #ddd solid;padding:3px;} #content .snb .mybox .login .lbody li a.lbmore:hover {color:#ff6000;background:#f0f0f0} #content .snb .mybox .login .lbody .none {text-align:center;padding-top:40px;} #content .snb .mybox .login .lbody .none span {display:block;font-weight:bold;font-size:13px;letter-spacing:-1px;} #content .snb .mybox .login .lbody .none p {padding:10px 0 40px 0;color:#9C9C9C;line-height:140%;letter-spacing:-1px;font-size:11px} #content .snb .mybox .logout .tabbox {} #content .snb .mybox .logout .tabbox .np {padding:10px 0 10px 10px;background:#F4F4F4;border-bottom:#D4D4D4 solid 1px;font-weight:bold;color:#9E9E9E;} #content .snb .mybox .logout .tabbox .tp {float:left;width:90px;height:22px;background:#F4F4F4;border-bottom:#D4D4D4 solid 1px;text-align:center;font-weight:bold;color:#9E9E9E;padding-top:12px;cursor:pointer;} #content .snb .mybox .logout .tabbox .vline {width:91px;border-right:#D4D4D4 solid 1px;} #content .snb .mybox .logout .tabbox .on {background:#ffffff;border-bottom:#ffffff solid 1px;color:#676767;} #content .snb .mybox .logout .nlog {margin-top:10px;padding:0 0 30px 10px;position:relative;height:65px;} #content .snb .mybox .logout .i1 {position:absolute;font-size:11px;font-family:dotum;color:#67686A;letter-spacing:-1px;padding-bottom:3px;} #content .snb .mybox .logout .i1 .input {float:left;width:110px;height:17px;border:#BEBEBE solid 1px;font-size:13px;font-family:tahoma} #content .snb .mybox .logout .i1 .input:focus {border:#BEBEBE solid 2px;} #content .snb .mybox .logout .i2 {position:absolute;top:48px;left:8px;font-family:dotum;font-size:11px;letter-spacing:-1px} #content .snb .mybox .logout .i3 {position:absolute; top:1px;left:127px;} #content .snb .mybox .logout .rbtm {position:absolute;bottom:4px;left:8px;font-size:11px;font-family:dotum;color:#67686A;letter-spacing:-1px;padding:10px 0 0 3px;} #content .snb .mybox .logout .rbtm .ipc {color:#67686A} #content .snb .mybox .logout .rbtm a {color:#313946;} #content .snb .mybox .logout .rbtm span {padding:0 5px 0 5px;} #content .snb .mybox .logout .slog {padding:20px 10px 10px 10px;} #content .snb .mybox .logout .slog .icon {width:160px;padding:0px;text-align:center;} #content .snb .mybox .logout .slog .icon img {cursor:pointer;margin:0 4px 0 4px;} #content .snb .mybox .logout .slog .guide {line-height:140%;font-size:11px;font-family:dotum;color:#999;letter-spacing:-1px;padding:10px 0 0 0;} #content .snb .category {padding:0;margin-left:420px; background:-webkit-linear-gradient(to left, #00a651, #7cbb22); background:-o-linear-gradient(to left, #00a651, #7cbb22); background:-moz-linear-gradient(to left, #00a651, #7cbb22); background:linear-gradient(to left, #00a651, #7cbb22);} #content .snb .category h2 {margin:0 0 10px 0;font-family:nanumgothic,dotum;font-size:20px;letter-spacing:-2px;font-weight:bold;color:#222;text-align:center;background:url(./image/sub_title_bg.gif) no-repeat;height:46px;line-height:40px;} #content .snb .category ul {padding:0;margin:0;} #content .snb .category li { display:inline-block;list-style-type:none;margin:0;} #content .snb .category .m2 {letter-spacing:-1px;} #content .snb .category .m2 a {color:#fff;display:block; padding:37px; font-weight:500} #content .snb .category .m2 a:hover {text-decoration:none;color:#7cbb22;background-color:#fff} #content .snb .category .selected2 a {color:#59a500; font-weight:500;background-color: #fff !important;} #content .snb .category .selected2 a:hover {color:#59a500;text-decoration:none;} #content .snb .category .selected2 span.num {color:#fff} #content .snb .category .orange a {background:url(./image/sub_active_orange.jpg) repeat-x 0 0;} #content .snb .category .green a {background:url(./image/sub_active_green.jpg) repeat-x 0 0;} #content .snb .category .blue a {background:url(./image/sub_active_blue.jpg) repeat-x 0 0;} #content .snb .category .light_blue a {background:url(./image/sub_active_light_blue.jpg) repeat-x 0 0;} #content .snb .category .black a {background:url(./image/sub_active_black.jpg) repeat-x 0 0;} #content .snb .category .grey a {background:url(./image/sub_active_grey.jpg) repeat-x 0 0;} #content .snb .category .red a {background:url(./image/sub_active_red.jpg) repeat-x 0 0;} #content .snb .category ul li ul {margin:0px;background:none;background:#f0f0f0 url(./image/submenu_shadow.gif) repeat-x top;padding:10px 0;border-top:none} #content .snb .category ul li ul li.m3 {font-weight:normal;font-size:13px;border-bottom:none} #content .snb .category ul li ul li.m3 a {font-weight:normal;font-family:dotum;color:#454545;display:block;padding-left:23px;height:21px;line-height:21px;background:url(./image/snb_m3_ico.gif) no-repeat 16px 8px;letter-spacing:-1px;} #content .snb .category ul li ul li.m3 a:hover {text-decoration:none;color:#000;background-color:#ddd;} #content .snb .category ul li ul li.selected3 a {color:#ff6000;font-weight:bold;background:url(./image/snb_m3_ico_open.gif) no-repeat 15px 7px;} #content .snb .category .spaceLi {height:7px;} #content .snb .category .new {font:normal 10px arial;color:#ff0000;} #content .snb .category .num {font:normal 11px arial;color:#999;} /*하단정보영역*/ #footerWrap{ position:relative; background:#1a1d21; padding:90px 0; margin-top:150px;} #footerInfoWrap .newPhoto {position:absolute;left:0;width:210px} #footerInfoWrap .newPhoto .tt {padding:0 0 8px 0;font-weight:bold;color:#666;} #footerInfoWrap .newPhoto .pic {float:left;margin:0 0 8px 5px;padding:3px;background:#fff} #footerInfoWrap .newPhoto .pic:hover{background:#ff6000} #footerInfoWrap .newPhoto .pic img {width:54px;height:45px;} #footerInfoWrap .newPhoto .nomargin {margin:0 0 7px 0;clear:both;} #footerInfoWrap .newPost {position:absolute;left:250px;width:210px} #footerInfoWrap .newPost .tt {padding:0 0 8px 0;font-weight:bold;color:#666;} #footerInfoWrap .newPost ul {padding:0;margin:0;} #footerInfoWrap .newPost li {list-style-type:none;margin-bottom:5px;} #footerInfoWrap .newPost li a {font-family:dotum;font-size:11px;color:#ccc;letter-spacing:-1px;line-height:135%;background:url(./image/ico_dot.gif) no-repeat 15px 4px;padding-left:23px;display:block} #footerInfoWrap .newPost li a:hover {text-decoration:none;color:#ff6000;background-position:15px -41px} #footerInfoWrap .newPost li .comment {font:normal 11px arial;color:#FC6138;} #footerInfoWrap .newPost li .trackback {font:normal 11px arial;color:#02ACD6;} #footerInfoWrap .newPost li .new {font-family:arial;font-size:10px;color:#ff0000;} #footerInfoWrap .newPost .none {padding:0 0 0 15px;font-size:11px;color:#ddd;letter-spacing:-1px;} #footerInfoWrap .newComment {position:absolute;left:250px;width:210px} #footerInfoWrap .newComment .tt {padding:0 0 8px 0;font-weight:bold;color:#666;} #footerInfoWrap .newComment ul {padding:0;margin:0;} #footerInfoWrap .newComment li {list-style-type:none;margin-bottom:5px;} #footerInfoWrap .newComment li a {font-family:dotum;font-size:11px;color:#ccc;letter-spacing:-1px;line-height:135%;background:url(./image/ico_dot.gif) no-repeat 15px 4px;padding-left:23px;display:block} #footerInfoWrap .newComment li a:hover {text-decoration:none;color:#ff6000;background-position:15px -41px} #footerInfoWrap .newComment li .comment {font:normal 11px arial;color:#FC6138;} #footerInfoWrap .newComment li .trackback {font:normal 11px arial;color:#02ACD6;} #footerInfoWrap .newComment li .new {font-family:arial;font-size:10px;color:#ff0000;} #footerInfoWrap .newComment .none {padding:0 0 0 15px;font-size:11px;color:#ddd;letter-spacing:-1px;} #footerInfoWrap .newNotice {position:absolute;left:250px;width:210px} #footerInfoWrap .newNotice .tt {padding:0 0 8px 0;font-weight:bold;color:#666;} #footerInfoWrap .newNotice ul {padding:0;margin:0;} #footerInfoWrap .newNotice li {list-style-type:none;margin-bottom:5px;} #footerInfoWrap .newNotice li a {font-family:dotum;font-size:11px;color:#ccc;letter-spacing:-1px;line-height:135%;background:url(./image/ico_dot.gif) no-repeat 15px 4px;padding-left:23px;display:block} #footerInfoWrap .newNotice li a:hover {text-decoration:none;color:#ff6000;background-position:15px -41px} #footerInfoWrap .newNotice li .comment {font:normal 11px arial;color:#FC6138;} #footerInfoWrap .newNotice li .trackback {font:normal 11px arial;color:#02ACD6;} #footerInfoWrap .newNotice li .new {font-family:arial;font-size:10px;color:#ff0000;} #footerInfoWrap .newNotice .none {padding:0 0 0 15px;font-size:11px;color:#ddd;letter-spacing:-1px;} #footerInfoWrap .postCalendar,#footerInfoWrap .bottomRss,#footerInfoWrap .bottomCounter { -webkit-border-radius: 8px; -moz-border-radius:8px; border-radius: 8px; -moz-box-shadow:1px 1px 6px rgba(0,0,0,0.5);-webkit-box-shadow:1px 1px 6px rgba(0,0,0,0.5);box-shadow:1px 1px 6px rgba(0,0,0,0.5);behavior: url(./_ie/PIE.htc); } #footerInfoWrap .postCalendar {position:absolute;width:184px;left:810px;background:#fff;border:2px #c0c0c0 solid;top:20px;} #footerInfoWrap .postCalendar .tt {padding:5px 0 5px 0;text-align:center;font-weight:bold;font-family:verdana;color:#666;} #footerInfoWrap .postCalendar .tt img {position:relative;top:-1px;} #footerInfoWrap .postCalendar .sunday {color:#2B97D7;} #footerInfoWrap .postCalendar .week {height:20px;} #footerInfoWrap .postCalendar .week td {color:#333;background:#f9f9f9;} #footerInfoWrap .postCalendar table {width:100%;} #footerInfoWrap .postCalendar td {text-align:center;color:#666;font-family:dotum;font-size:11px;} #footerInfoWrap .bottomRss {position:absolute;left:810px;width:174px;height:18px;padding:5px;background:#fff url(./image/rss.gif) no-repeat 5px 6px;border:2px #c0c0c0 solid;text-align:right;line-height:18px;} #footerInfoWrap .bottomRss {font-family:tahoma;font-size:11px;} #footerInfoWrap .bottomCounter {position:absolute;left:810px;background:#fff url(./image/ico_count.gif) no-repeat 8px 1px;width:114px;padding:5px 5px 5px 65px;border:2px #c0c0c0 solid;font-family:tahoma;font-size:11px;color:#777} #footerInfoWrap .customerCont {position:absolute;width:200px;height:200px;font-family:dotum;font-size:11px;color:#ddd;letter-spacing:-1px;} #footerInfoWrap .customerCont a {color:#fff;} #footerInfoWrap .customerCont a:hover {color:#ff6000;} /*하단*/ #footer { position:relative;} #footer .footerCont {display:block;position:relative; margin:0 15%;} #footer .footerCont div.footerMenu {text-align:center;margin-bottom:10px;padding:7px 20px;} #footer .footerCont div.footerMenu a {font-size:13px;font-family:dotum;color:#ddd;letter-spacing:-1px;} #footer .footerCont div.footerMenu a:hover {color:#ff6000} #footer .footerCont div.footerMenu .split {font-family:dotum;font-size:9px;color:#c0c0c0;} #footer .footerCont div.footerSiteInfo { position:relative; margin-left:400px;color:#c4c4c4} #footer .footerCont div.footerSiteInfo span{ margin-right:15px;} #footer .footerCont div.footerSiteInfo br{ display:none} #footer .footerCont address {font-family:arial; font-style:normal; margin-top:10px; color:#666;} #footer .footerCont address a{color:#666;} #footer .footerCont .footerLogo {position:absolute;left:0;top:0} #footer .footerCont .footerLogo img{ width:320px;} #footer .footerCont .qrimage {position:absolute;right:0;top:0} #footer .footerCont div.footerSiteInfo a.private{ position:absolute; right:0; top:0; border:1px #5f6164 solid; padding:5px 10px; color:#f6ff11; font-weight:400;} #footer .footerCont div.footerSiteInfo a:hover.private{ background:#5f6164; color:#f6ff11; font-weight:400;} #footer .footerCont div.footerSiteInfo p a{ color:#c4c4c4} /*etc*/ .templatePreview {position:fixed;top:0;left:0;z-index:1000;background:#ff6000;padding:15px;border:3px #000 solid;color:#fff;text-align:center} .usersavePreview {position:fixed;top:0;left:0;z-index:1000;background:#00ccff;padding:15px;border:3px #000 solid;color:#fff;text-align:center} /*탭메뉴01*/ .tab01 {background: url("./image/bg_tab.gif") no-repeat scroll 0 top transparent;overflow: hidden;position: relative;} .tab01 ul {margin:0;padding:0;overflow: hidden;padding-left: 1px;width: 100%;} .tab01 li {background: url("./image/bg_tab.gif") no-repeat scroll -1px top transparent;display: inline;float: left;margin-left: -1px;padding-left: 5px;} .tab01 li a {background: url("./image/bg_tab.gif") no-repeat scroll right top transparent;display: inline-block;height: 32px;letter-spacing: -1px;line-height: 32px;padding:0 20px 0 16px;text-decoration: none;vertical-align: top;text-align:Center} .tab01 li a:hover, .tab01 li a:active {text-decoration: none;} .tab01 li.selected {background-position: 0 -58px;margin-right: 1px;position: static;z-index: 10;} .tab01 li.selected a {background-position: right -58px;color: #ff6000;font-weight: bold;} div.depth5 {list-style:none;height:33px;border-bottom:1px #bbb solid;margin-top:5px;} div.depth5 a{display:inline-block;padding:8px 15px 5px 15px;letter-spacing:-0.5px;margin-right:10px;background:url('./image/common/bul_arrow1.gif') no-repeat 0 10px;font-weight:bold;} div.depth5 a.selected5 {background:#ff6000;font-weight:bold;color:#fff;-webkit-border-radius: 3px; -moz-border-radius: 3px;} #pctomobile {visibility:hidden} #pctomobile_blueb {position:absolute;bottom:-70px;z-index:10000;display:block;width:100%;border:1px #000 solid;background:#e0e0e0;height:70px;text-align:center;font-family:dotum;font-size:24px;color:#fff;line-height:70px;} #pages_join, #pages_login, #mypage_main, #pages_all, .iframe, #guidebox{ width:1200px; margin:0 auto; padding-top:130px !important;} #pages_login{ padding:200px 0 100px 0;} #i_div0_0, #catinfo {font-size: 13px;} /* visual_wrap */ .visual_wrap{ position: relative; width:100%;padding-bottom:650px; } .visual_wrap h2{ position: absolute; text-align:center; width:100%;top:300px;color:#fff;} .visual_wrap h2 span{ position: relative;font-size:67px;color:#fff;font-weight: 600;letter-spacing:-3px;} .visual_wrap .img{width:100%;} .visual_wrap .img img{width:100%;} .inner{ position:relative; width:1700px; margin:0 auto;} .snb_e{ position:absolute; width:100%; top:270px; color:#fff; z-index:1; text-align:center; font-size:27px; font-weight:300;} @media screen and (max-width: 1920px){ .ff{font-size:30px;} .mainContents{ font-size:17px;} #content .subContent {font-size:19px; padding-top:100px;} #content .subContent h3.subTitleSubject { font-size:40px; margin-bottom:50px;} #content .snb .category{ margin-left:250px;} #footerWrap{ padding:70px 0; margin-top:120px;} #footer .footerCont { margin:0 10%;} #footer .footerCont .footerLogo img{ width:290px;} #footer .footerCont div.footerSiteInfo { margin-left:350px;} .visual_wrap{padding-bottom:500px;} .visual_wrap h2{ top:230px} .visual_wrap h2 span{font-size:50px;} .visual_wrap h2 span::after{width:30px;height:30px; top:20px; right:-40px;} .snb_e{ top:205px; font-size:22px;} .inner{ width:1400px;} #content .snb .category .m2 a { padding:30px;} .fs17{ font-size:15px;} .fs19{ font-size:16px;} .fs20{ font-size:17px;} .fs23{ font-size:19px; line-height:25px;} .fs25{ font-size:20px;line-height:27px;} .fs27{ font-size:22px;} .fs30{ font-size:25px !important; line-height:35px;} .fs35{ font-size:30px; line-height:40px;} .fs37{ font-size:32px; line-height:42px;} .fs40{ font-size:33px; line-height:43px;} .fs45{ font-size:35px; line-height:45px;} .fs50{ font-size:40px; line-height:50px;} .fs60{ font-size:50px; line-height:60px;} .fs70{ font-size:60px; line-height:75px;} .fs80{ font-size:70px; line-height:85px;} .fs90{ font-size:80px;} .pd70 { padding:50px;} .pd100 { padding:70px;} .pb100 {padding-bottom:70px;} .pb150 {padding-bottom:120px;} .pt20{ padding-top:15px;} .pt150{ padding-top:120px;} .mg70 { margin:50px;} .mt5{ margin-top:5px;} .mt20{ margin-top:15px;} .mt60{ margin-top:50px;} .mt150{ margin-top:120px;} .mb150{ margin-bottom:120px;} } @media screen and (max-width: 1600px){ #content .snb .category .m2 a{ padding:20px;} #content .snb .category{ margin-left:150px;} } @media screen and (max-width: 1400px){ .inner{ width:100%;} #footer .footerCont{ margin:0 5%;} #content .subContent #location{ right:20px;} #content .subContent h3.subTitleSubject{ margin-left:50px;} #content .snb .category{ margin-left:0px; text-align:center;} #content .snb .category .m2 a{ font-size:17px;} } @media screen and (max-width: 1300px){ .fs17{ font-size:15px;} .fs19{ font-size:16px;} .fs20{ font-size:17px;} .fs23{ font-size:19px; line-height:24px;} .fs25{ font-size:20px;line-height:25px;} .fs27{ font-size:22px;} .fs30{ font-size:25px; line-height:32px;} .fs35{ font-size:30px;} .fs37{ font-size:32px;} .fs40{ font-size:33px; letter-spacing:-2px;} .fs45{ font-size:35px;} .fs50{ font-size:35px; line-height:50px;} .fs60{ font-size:40px; line-height:60px;} .fs70{ font-size:45px; line-height:75px;} .fs80{ font-size:50px; line-height:85px;} .fs90{ font-size:55px;} #footer .footerCont .footerLogo{ position:relative; margin-bottom:10px;} #footer .footerCont div.footerSiteInfo{ margin-left:0;} } @media screen and (max-width: 1200px){ #guidebox{ width:calc(100% - 20px); margin:0 15px; padding-top:50px !important;} #guidebox li{ padding:0 !important;} #content .snb .category .m2 a{ padding:20px 15px;} } @media screen and (max-width: 1024px){ .pt150{ padding-top:100px} .pb150{ padding-bottom:100px} .pt50{ padding-top:30px;} .visual_wrap{ padding-bottom:350px;} .visual_wrap h2{ top:150px;} #content .snb .category{ display:none} #content .subContent{ padding-top:0;} #content .subContent #location{ position:relative; right:0; margin-left:50px; margin-bottom:50px;} #content .subContent h3.subTitleSubject{ margin-bottom:0} } @media screen and (max-width:980px){ .fs23{ font-size:17px; line-height:24px;} .fs25{ font-size:18px;line-height:25px;} .fs27{ font-size:20px; line-height:25px;} .fs30{ font-size:23px !important; line-height:32px;} .fs35{ font-size:28px;} .fs37{ font-size:30px;} .fs40{ font-size:31px;} .fs45{ font-size:33px;} .fs50{ font-size:35px; line-height:50px;} .fs60{ font-size:35px; line-height:60px;} .fs70{ font-size:40px; line-height:75px;} .fs80{ font-size:45px; line-height:85px;} .fs90{ font-size:50px;} #footer .footerCont div.footerSiteInfo a.private{ position:relative; margin-top:50px; display:inline-block;} } @media screen and (max-width:700px){ #footer .footerCont div.footerSiteInfo br{ display:block} #footer .footerCont .footerLogo img{ width:200px; height:auto;} } @media screen and (max-width:640px){ .ff{font-size:25px;} .mainContents{ font-size:17px;} #content .subContent{ font-size:17px;} #footerWrap{ margin-top:70px;} .pt150{ padding-top:70px} .pb150{ padding-bottom:70px} .pt50{ padding-top:20px;} .pb100{ padding-bottom:40px;} .mb70{ margin-bottom:40px;} .mb50{ margin-bottom:35px;} .mb100{ margin-bottom:70px} .mb150{ margin-bottom:70px} .mt150{ margin-top:70px;} .fs30{ font-size:21px !important; line-height:29px;} .fs35{ font-size:26px; line-height:30px;} .fs37{ font-size:28px; line-height:33px;} .fs40{ font-size:30px; line-height:35px;} .fs45{ font-size:31px;line-height:35px;} .fs50{ font-size:31px; line-height:42px;} .fs60{ font-size:35px; line-height:45px;} .fs70{ font-size:40px; line-height:75px;} .fs80{ font-size:45px; line-height:85px;} .fs90{ font-size:50px;} .visual_wrap{ padding-bottom:270px;} .visual_wrap h2{ top:100px;} .visual_wrap h2 span{ font-size:35px;} #content .subContent h3.subTitleSubject::before{ width:55px; height:55px;top:-10px;left:-30px;} #content .subContent h3.subTitleSubject{ font-size:30px; padding-bottom:5px;} } @media screen and (max-width:540px){ .visual_area{ margin-top:80px;} .visual_wrap{ margin-top:80px;} } @media screen and (max-width:480px){ #siteAddressText{ letter-spacing:-1px;} .visual_wrap{ padding-bottom:200px; margin-top:80px;} .visual_wrap h2{ top:80px; text-align:left} .visual_wrap h2 span{ font-size:30px; padding-left:30px;} .mt50{ margin-top:30px;} .mb50{ margin-bottom:30px;} .mt30{ margin-top:10px;} .fs20{ font-size:16px;} .fs30 {font-size:20px !important;} .fs37{ font-size:26px; line-height:30px;} .fs40{ font-size:28px;} .fs45{ font-size:28px;} .fs50{ font-size:26px; line-height:35px;} .fs60{ font-size:35px; line-height:45px;} .fs70{ font-size:40px; line-height:50px;} .fs80{ font-size:45px; line-height:55px;} .fs90{ font-size:50px;} } @media screen and (max-width:400px){ .fs60{ line-height:42px;} } .visual_area .ctrlbox {z-index:2; position:absolute; bottom:15%; width:250px; left:50%; margin-left:-135px; text-align:center;} .visual_area .ctrlbox:before{ content:''; position:absolute; top:-10px; left:0; width:100%; height:50px; background:#000; opacity:0.4; border-radius:30px;} .visual_area .ctrlbox button {position:relative; width:36px; height:36px;} .visual_area .ctrlbox button:after {content:'\e93d'; color:#fff; font-family:'xeicon'; font-size:26px} .visual_area .ctrlbox button:hover:after {color:#00baff} .visual_area .ctrlbox button.next {padding-left:9px;} .visual_area .ctrlbox button.next:before {content:''; position:absolute; top:8px; left:0px; display:block; width:1px; height:20px; background:rgba(255, 255, 255, 0.4);} .visual_area .ctrlbox button.next:after {content:'\e940';} .visual_area .ctrlbox button.pause, .visual_area .ctrlbox button.play {width:25px;} .visual_area .ctrlbox button.pause:after, .visual_area .ctrlbox button.play:after {font-size:25px} .visual_area .ctrlbox button.pause:after {content:'\ea3b'} .visual_area .ctrlbox button.play:after {content:'\ea3e'} .visual_area .list_num {position:relative;display:inline-block; padding:0 5px; font-size:20px; color:#fff} .visual_area .list_num span {padding:0 7px} .visual_area .blind {position:absolute; top:-1000px; left:-10000px; overflow:hidden; font-size:1px; text-indent:-9999px; line-height:0;} .visual_area {position:relative; } .visual_area .list {overflow:hidden; width:100%; height:100%} .visual_area .list .cont {float:left; width:100%; height:100vh;z-index:-1 !important; } .visual_area .list .cont .visual_tx { position:absolute; top:300px; color:#fff; width:100%; text-align:center;font-family: 'GyeonggiBatang'; font-size:77px; font-weight:bold; letter-spacing:-2px;} .visual_area .list .cont .tx{ margin-top:80px;} .visual_area .list .cont .tx img{height:90px;} .visual_area .list .cont .mTxt, .visual_area .list .cont .mTxt2{ display:none} .visual_area .list .cont .visual_tx strong {display:block; margin-bottom:20px; font-size:75px; font-family:'roboto', 'HYUNDAI'; line-height:110%; letter-spacing:-0.4px;} .visual_area .list .cont:not(:nth-child(1)) .visual_tx strong {font-size:70px; line-height:118%;} /* 영어라서 첫번째만 텍스트 조절 */ .visual_area .list .cont .visual_tx p { margin-top:30px; font-weight:400; font-size:25px; letter-spacing:-1.2px;} .visual_area .list .cont .visual_tx a {display:none} .visual_area .list .cont.slick-active a {display:inline-block} .visual_area .list .cont .img {position:relative; width:100%; height:100%; background-repeat:no-repeat; background-size:cover;} .visual_area .list .cont .img span {z-index: -1; position:absolute; top:0; left:0; display:block; width:100%; height:100%; transition:4s .1s;} .visual_area .list .cont[class*=slick-active].on .img span {transform:scale(1);transform: rotate(.001deg);} .visual_area .list .cont .img .v1 {background:url(./image/main/main_visual_new1-1.jpg) no-repeat center 0; background-size:cover} .visual_area .list .cont .img .v2 {background:url(./image/main/main_visual_new2.jpg) no-repeat center 0;background-size:cover} .visual_area .list .cont .img .v3 {background:url(./image/main/main_visual_new3.jpg) no-repeat center 100%;background-size: auto 100%;} .visual_area .list .cont .img .v4 {background:url(./image/main/main_visual_new4.jpg) no-repeat center 100%;background-size: auto 100%;} .visual_area .ico_arrow {z-index:5000; position:absolute; width:100%; text-align:center; font-size:14px; color:#fafafa; /* transform:rotate(90deg) translate(-50%, -2px); */ animation:ico_arrow 1.2s linear infinite 0s;} @keyframes ico_arrow { 0% { bottom:55px; } 50%{ bottom:50px; } 100% { bottom:55px; } } @media screen and (max-width:1920px) { .visual_area .ctrlbox {bottom:10%; width:220px; margin-left:-110px;} .visual_area .ctrlbox:before{ top:-5px; height:40px;} .visual_area .ctrlbox button.pause::after, .visual_area .ctrlbox button.play::after{ font-size:20px;} .visual_area .ctrlbox button::after{ font-size:20px;} .visual_area .list_num{ font-size:17px;} .visual_area .list .cont .visual_tx { top:250px; font-size:57px;} .visual_area .list .cont .tx{ margin-top:0;} .visual_area .list .cont:nth-child(1).visual_tx{top:150px; } .visual_area .list .cont:nth-child(1) .visual_tx img{ width:850px;} .visual_area .list .cont .visual_tx p { font-size:20px;} .visual_area .list .cont .tx img{ width:auto !important;height:85px;} .visual_area .list .cont .img .v1{ background-position: center 50%;} } @media screen and (max-width:1600px) { .visual_area .list .cont { height:900px;} .visual_area .list .cont .img .v1{ background-position:50% 50px;} .visual_area .list .cont .img .v3{ } .visual_area .list .cont .visual_tx{ top:250px;} } @media screen and (max-width:1500px) { .visual_area .ctrlbox{ bottom:50px;} .visual_area .list .cont .img .v1{ background-position:50% 50px;} .visual_area .list .cont .img .v1, .visual_area .list .cont .img .v2, .visual_area .list .cont .img .v3 {background-size:cover;} } @media screen and (max-width:1200px) { .visual_area .list .cont { height:700px;} .visual_area .list .cont .visual_tx{ top:230px; font-size:50px;} .visual_area .list .cont .visual_tx strong {font-size:40px} .visual_area .list .cont:not(:nth-child(1)) .visual_tx strong {font-size:38px;} .visual_area .list .cont .visual_tx p {font-size:20px} .visual_area .list .cont:nth-child(1) .visual_tx img{ width:750px;} .visual_area .list .cont .tx img{ width:auto !important;height:65px;} } @media screen and (max-width:1024px) { .visual_area .list .cont { height:600px;} .visual_area .list .cont .img .v1{ background-position:50% 0;} .visual_area .list .cont .visual_tx{ top:100px;} .visual_area .list .cont .tx img{ width:auto !important;height:60px;} .visual_area .list .cont .visual_tx p{ padding:0 20px;} } @media screen and (max-width:980px) { .visual_area .list .cont { height:480px;} .visual_area .list .cont .img .v1{ background-position:50% 0;} .visual_area .list .cont:nth-child(1) .visual_tx img{ width:90%; margin:0 5%; } .visual_area .list .cont .visual_tx{ top:80px;} .visual_area .list .cont .tx img{ width:auto !important;height:50px;} .visual_area .list .cont .visual_tx p{ padding:0 20px;} .visual_area .list .cont .tx2 p{ display:none;} .sct1 .ico_arrow {font-size:11px} } @media screen and (max-width:640px) { .visual_area .list .cont { height:400px;} .visual_area .list .cont .visual_tx{ top:120px; font-size:30px; margin:0 20px;} .visual_area .list .cont .visual_tx .mTxt2{ display:block; margin-top:10px; line-height:40px; text-align:center;} .visual_area .list .cont .visual_tx img { display:none;} .visual_area .list .cont .tx{ margin-top:0} .visual_area .list .cont .tx p{font-size:15px; text-align:left; margin-top:15px;} .visual_area .list .cont .tx p br{ display:none;} .visual_area .list .cont .visual_tx .mTxt{ display:block; font-size:30px; line-height:35px; font-weight:bold; margin:-25px 0px 0 0px; text-align:center;} .visual_area .list .cont .visual_tx .mTxt br{ display:block} } @media screen and (max-width:540px) { .visual_area .list .cont .visual_tx{ text-align:left; top:90px;} .visual_area .list .cont .visual_tx .mTxt{ } } @keyframes ico_arrow { 0% { bottom:20px; } 50%{ bottom:15px; } 100% { bottom:20px; } } @media screen and (max-width:480px) { .visual_area .list .cont { height:360px;} .visual_area .ctrlbox::before{ top:0;} .sct1 .ico_arrow {display:none} .visual_area .list .cont .visual_tx .mTxt{ font-size:23px; line-height:27px;} .visual_area .list .cont .img .v1{ } .visual_area .list .cont .img .v3{ background-position:50% 0} } @media screen and (max-width:400px) { .visual_area .list .cont{ height:280px;} .visual_area .list .cont .visual_tx{ font-size:26px; line-height:30px;} } /* ===== MAIN - VISUAL ===== */ .main-visual {position:relative;margin:0 auto;height:100vh;} .main-visual .visual-slider {overflow:hidden;position:absolute;left:50%;top:50%;width:100%;height:100%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%); } .main-visual .visual-slider .swiper-slide {overflow:hidden;position:relative;height:100%;} .main-visual .visual-slider .swiper-slide .vs-bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center bottom;background-size:cover; transition-duration:3s;} .main-visual .visual-slider .swiper-slide .vs-bg1{ background-image:url(./image/main/main_visual_new1-1.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg2{ background-image:url(./image/main/main_visual_new2.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg3{ background-image:url(./image/main/main_visual_new3.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg4{ background-image:url(./image/main/main_visual_new4.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg5{ background-image:url(./image/main/main_visual_new5.jpg);} .main-visual .visual-slider .swiper-slide .vs-txt {display:flex; flex-direction:column; text-align:center; justify-content:center; position:relative; margin:0 auto; max-width:150em; width:74%; height:100%; z-index:1; color:#fff; margin-top:-200px; } .main-visual .visual-slider .swiper-slide .vs-txt h1, .main-visual .visual-slider .swiper-slide .vs-txt h2, .main-visual .visual-slider .swiper-slide .vs-txt p, .main-visual .visual-slider .swiper-slide .vs-txt img {opacity:0;;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);} .main-visual .visual-slider .swiper-slide .vs-txt h1{font-size:50px;font-weight:600; } .main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size:110px; margin:20px 0 30px 0; font-weight:900} .main-visual .visual-slider .swiper-slide .vs-txt p {font-size:25px;} .main-visual .visual-slider .swiper-slide .vs-txt img{ width:70%;} .main-visual .visual-slider .swiper-slide .ty01{ display:flex; text-align:left; justify-content: space-between; align-items: flex-end;} .main-visual .visual-slider .swiper-slide .ty01 h1{ font-size:110px; line-height:115px; font-weight:400;} .main-visual .visual-slider .swiper-slide .ty01 h1 b{ font-weight:900;} .main-visual .visual-slider .swiper-slide .ty01 p{ position:relative; font-size:30px; line-height:40px;} .main-visual .visual-slider .swiper-slide .ty01 p:before{ content:''; position:absolute; top:20px; left:-250px; width:200px; height:1px; border-top:1px #fff solid;} .main-visual .visual-slider .swiper-slide .ty02{ background:rgb(0,0,0,0.5); padding:130px 0;} .main-visual .visual-slider .swiper-slide .ty02 h1, .main-visual .visual-slider .swiper-slide .ty03 h1{ font-size:67px; font-weight:700; padding-bottom:15px;} .main-visual .visual-slider .swiper-slide .ty02 p, .main-visual .visual-slider .swiper-slide .ty03 p{ font-size:30px; line-height:40px;} .main-visual .visual-slider .swiper-slide .ty03{ color:#333;} .main-visual .visual-slider .swiper-slide .ty03 ul{justify-content: center; gap:0 70px; margin-top:70px;} .main-visual .visual-slider .swiper-slide .ty03 ul li span{ display:block; color:#4a65ac; } .main-visual .visual-slider .swiper-slide .ty03 ul li p{ font-weight:500; font-size:25px;} .main-visual .visual-slider .swiper-slide .ty03 ul li+li{ border-left:3px dotted #fff; padding-left:70px} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:30px;color:#fff;} .main-visual .visual-slider .swiper-button-prev { margin-left:-100px; } .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{position:absolute; background:none; display:flex;align-items: center;justify-content: center;width:70px; height:70px; left:50%; top:auto; border-radius:50%; border:1px solid #fff; bottom:150px; z-index:10; } .main-visual .visual-slider .swiper-button-prev:after { display:none;} .main-visual .visual-slider .swiper-button-next { } .main-visual .visual-slider .swiper-button-next:after { display:none;} .main-visual .visual-slider .swiper-pagination { position:absolute; right:auto; bottom:150px; left:50%; margin-left:70px; font-size:20px;display:flex;align-items: center;justify-content: center;height:70px; z-index:10; width:100px; color:#ffffff; letter-spacing:0.333em;} .main-visual .visual-slider .swiper-pagination span { font-style:normal;} .main-visual .visual-slider .swiper-pagination span {font-style:normal;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg {-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:transform 1.4s;-moz-transition:transform 1.4s;-ms-transition:transform 1.4s;-o-transition:transform 1.4s;transition:transform 1.4s;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h1, .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h2, .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt img {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt p {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-ms-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s;} .hide {position: absolute;left: -9999%;font-size: 0;line-height: 0;text-indent: -9999px;} @media screen and (max-width: 1920px){ .main-visual .visual-slider .swiper-slide .vs-txt{ margin-top:-190px;} .main-visual .visual-slider .swiper-pagination { font-size:17px; bottom:120px; height:50px; margin-left:50px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{width:50px; height:50px;bottom:120px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:25px;} .main-visual .visual-slider .swiper-button-prev { margin-left:-70px; } .main-visual .visual-slider .swiper-button-next {} } @media screen and (max-width: 1280px){ .main-visual {height:700px;} .main-visual .visual-slider .swiper-slide .vs-txt img{ width:87%;} } @media screen and (max-width: 640px){ .main-visual .visual-slider .swiper-slide .vs-txt{ margin-top:-100px;} .main-visual .visual-slider .swiper-slide .vs-txt img{ width:100%;} .main-visual {height:500px;} .main-visual .visual-slider .swiper-pagination, .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ bottom:50px;} } /* Layer popup */ .layerPopupWrap {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: -1; opacity:0; } .layerPopup {position: absolute; left: 50%; top: 50%; padding: 0 0 40px; width: 100%; max-width: 1560px; text-align: center; color: #fff; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);} .layerPopup h3 {line-height: 2.5rem; font-family: 'Titillium Web', sans-serif; font-size: 2.5rem;} .layerPopupCont {margin: 1rem auto; padding: 1rem; width: 100%; max-width: 1000px; min-height: 30rem; background: #fff;} .layerPopup .closeWrap a {display: inline-block; margin: 0 0.25rem; padding: 0 1.5rem; line-height: 2rem; border-radius: 1rem; background: #000; color:#fff;} .layerPopup .closeWrap a i {margin-left: 1rem;} .layerPopup br{ display:none;} .openPop { display:block; } #LayerPopupList {position: relative; display: inline-block; width:calc(100% - 6rem); margin: 2.5rem auto; opacity:1; } #popupList {overflow: hidden; } .layerPopup .popup_list img { max-width:100%; } .layerPopup .popup_list a { display:block; width:100%; height:100%;} .layerPopup .slick-counter { display:none;position: absolute; top:-7px; left: 50%; margin-left:200px; padding-top: 0; width:52px; height:52px; line-height:52px; text-align: center; font-family: 'Titillium Web', sans-serif; font-size: 0.9rem; font-weight:700; color: #fff; letter-spacing: -0.05em; border-radius: 50%; background:-webkit-linear-gradient(to left, #00a651, #7cbb22); background:-o-linear-gradient(to left, #00a651, #7cbb22); background:-moz-linear-gradient(to left, #00a651, #7cbb22); background:linear-gradient(to left, #00a651, #7cbb22); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a651', endColorstr='#7cbb22',GradientType=1); } .layerPopup .slick-counter .current {color: #ffd65d;} .layerPopup .slick-arrow {position: absolute; top: 50%; display: block; margin-top: -3rem; width: 3rem; height:3rem; color: transparent; overflow: hidden;} .layerPopup .slick-arrow:before {position: absolute; top: 0; left: 0; width: 3rem; height: 3rem; text-align: center; font-family: "remixicon"; font-size: 3rem; color: #fff; text-shadow: 3px 3px 3px rgba(0,0,0,0.5);} .layerPopup .slick-arrow.slick-prev {left: -5rem;} .layerPopup .slick-arrow.slick-prev:before {content: "\ea64"; } .layerPopup .slick-arrow.slick-next {right: -5rem;} .layerPopup .slick-arrow.slick-next:before {content: "\ea6e";} .layerPopup .closeWrap a {display: inline-block; margin:0 0.25rem 0.25rem; padding: 0 1.5rem; line-height: 2rem; border-radius: 1rem; background: #000;} .layerPopup .closeWrap a i {margin-left: 1rem;} .slick-slider {transition:all ease-in-out .3s; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent; } .slick-slide { display:none; height:100%; min-height:1px; vertical-align:middle; } .slick-list { overflow:hidden; } .slick-list.dragging { cursor:pointer; } .slick-initialized .slick-slide { display:inline-block; overflow:hidden; vertical-align:top; } .slick-arrow.slick-hidden { display:none; } .slick-current { opacity:1; display:block; } .slick-track {position:relative; left:0; top:0; display:block; margin-left:auto; margin-right:auto; } /* 자세히보기 버튼 */ a.button--aylen { display:block;overflow: hidden;position:relative; background:#68af03;border-radius:30px; width:155px;height:55px;line-height:55px;color:#fff; padding-left:30px; color:rgba(255,255,255,0.7);font-weight:500; -webkit-transition: color 0.3s;transition: color 0.3s;; } a.button--aylen span{position:relative;z-index:4;} a.button--aylen span:before{content: "\e60d"; position:absolute; top:0; right:-110px;width:100%; font-size:20px; line-height:30px;font-family:'xeicon'; color:#fff; vertical-align:middle; opacity:0.7; } a.button--aylen::before, a.button--aylen::after { content: ''; position: absolute; height: 100%;width: 100%; bottom:0; left:-100%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } a.button--aylen:before {background: rgba(31,117,17,0.2); } a.button--aylen:after {background: rgba(31,117,17,0.9);} a.button--aylen:hover{ border-bottom:none;} a.button--aylen:hover span{color: #fff;} a.button--aylen:hover span:before{ opacity:1;} a.button--aylen:hover::before, a.button--aylen:hover::after {border-radius:30px; -webkit-transform: translate3d(100%,0 , 0); transform: translate3d(100%, 0, 0); } a.button--aylen:hover::after { -webkit-transition-delay: 0.175s; transition-delay: 0.175s; } /* s02 */ #s02{ position:relative;} #s02:before{ content:''; position:absolute; bottom:0; left:0; width:100%; height:540px; background:#f7f4ef} .main-online-left {} .main-online-input { display:inline-block; vertical-align:top; position:relative;height:45px;line-height:45px; border:1px solid rgba(210, 210, 210, 0.5); background-color:#fff; padding:0 0px 0 55px; color:#000; font-size:21px;} .main-online-input i { position:relative; position:absolute; top:0; left:0;font-size:25px;font-family:'xeicon'; font-style:normal; color:#777;} .main-online-input i:before{ position:absolute; top:0px; left:20px;width:45px; height:45px; line-height:45px; display:inline-block;} .main-online-input input{ width:200px; height:100%; padding-right:15px; border:none;} .main-online-input select{ width:100px; height:100%; border:none; color:#777;} .main-online-input .material-icon1:before{content: "\e91c"; } .main-online-input .material-icon2:before{ content:"\e9d3"} .main-online-input .material-icon3{ position:absolute; top:0px; left:20px;background:url(./image/main/sec6_icon3.png) no-repeat 0 50%; width:45px; height:45px; display:inline-block; } #s02 .cs{ position:absolute; top:-96px; margin:0 13%; width:calc(100% - 27%);} #s02 .cs > div{ padding:25px 0; width:100%; color:#fff;} #s02 .cs .advice{ position:relative; background:#73ba0d; border-radius:30px 30px 0 0px } #s02 .cs .cs_tel{ background:#004a80;border-radius:30px 30px 0 0px} #s02 .cs dl{ position:relative; margin-left:22%; line-height:45px;} #s02 .cs dl dt{ position:relative; padding-left:40px; display:inline-block; margin-right:10px;vertical-align:middle;} #s02 .cs dl dt span{ color:#e9ec0c} #s02 .cs dl dd{ display:inline-block;} #s02 .cs dl dt:before{ content:''; position:absolute; top:0px; left:0; width:27px; height:27px;} #s02 .cs dl:nth-child(1) dt{ margin-bottom:10px; margin-left: 30px;} #s02 .cs .advice dl:before{ content:''; position:absolute; top:0px; left:-170px; width:150px; height:50px; background:url(./image/main/s01_txt_img.png) no-repeat; background-size:cover;} #s02 .cs .advice dl dt:before{background:url(./image/main/s01_icon1.png) no-repeat; background-size:100% auto;} #s02 .cs .advice dl dd > div{ display:inline-block; vertical-align:middle;} #s02 .cs .advice .check{ margin:0 20px; 0 10px} #s02 .cs .cs_tel dl dt:before{background:url(./image/main/s01_icon2.png) no-repeat;background-size:100% auto;} #s02 .cs .cs_tel dd{ color:#14e1ff} #s02 .cs a.btn{ background:#32900c; color:#fff; padding:10px 40px; border-radius:30px;} #s02 .cs a.btn:hover{ background:#227700} #s02 .cs a.private{ color:#fff; text-decoration:underline} .s02_list {position:relative; margin:0 15%;} .s02_list ul { display:table; width:100%;} .s02_list ul li {float:left; width:50%; } .s02_list .area{ position:relative; margin:70px;height:300px; } .s02_list .area .fs25{ position:relative;} .s02_list ul li:nth-child(1){ background:#f5f5f5 url(./image/main/s02_bg1.jpg) no-repeat;background-size:cover; color:#3e7300;} .s02_list ul li:nth-child(2){ background:url(./image/main/s02_bg2.jpg) no-repeat 50% 100%;background-size:cover; color:#13539b;} .s02_list ul li:nth-child(3){ background:url(./image/main/s02_bg3.jpg) no-repeat 50% 90%;background-size:cover; color:#13539b; } .s02_list ul li:nth-child(3) a.button--aylen{ background:#144471} .s02_list ul li:nth-child(3) a.button--aylen:before {background: rgba(10,37,74,0.2); } .s02_list ul li:nth-child(3) a.button--aylen:after {background: rgba(10,37,74,0.9); } .s02_list ul li:nth-child(4){ background:url(./image/main/s02_bg4.jpg) no-repeat;background-size:cover; color:#3e7300;} .s02_list .btn_more{ position:absolute; right:0; bottom:0;} /* s03 */ #s03 { background:#f7f4ef} #s03 .icon{ text-align:center; margin:0 20%;} #s03 .icon:after {clear: both; display: block; content: ''} #s03 .icon > li{position: relative; display:inline-block; text-align: center;width:calc((100% - 150px) / 7);} #s03 .icon .link{display: block; text-decoration: none;} #s03 .icon .ico_{position: relative; margin: 0 0 10px 0; z-index: 2; transition: all 300ms ease; border:3px #f7f4ef solid;} #s03 .icon .tit{position: relative; display: block; line-height: 24px; color: #63616d; z-index: 2;} #s03 .icon .link:hover .ico_{transform: translate(0, -10px); border:3px #68af03 solid;} .ico_ {display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width:130px; height:130px; border-radius:50%;} .ico_.story01 { background:url(./image/main/s03_icon1.png) no-repeat 50% 50% ; } .ico_.story02 { background:url(./image/main/s03_icon2.png) no-repeat 50% 50% ; } .ico_.story03 { background:url(./image/main/s03_icon3.png) no-repeat 50% 50% ; } .ico_.story04 { background:url(./image/main/s03_icon4.png) no-repeat 50% 50% ; } .ico_.story05 { background:url(./image/main/s03_icon5.png) no-repeat 50% 50% ; } .ico_.story06 { background:url(./image/main/s03_icon6.png) no-repeat 50% 50% ; } .ico_.story07 { background:url(./image/main/s03_icon7.png) no-repeat 50% 50% ; } /* s04 */ .s04_list { display:table; width:100%;} .s04_list .s04_box {position:relative; float:left; width:calc(100% / 3); display:block; overflow:hidden;height:772px;} .s04_list .s04_box:last-child {margin-bottom:0;} .s04_list .s04_box .thumb {position:relative; display:block; float:left; width:100%; height:100%; vertical-align:middle;} .s04_list .s04_box .thumb .img {display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; overflow:hidden;; } .s04_list .s04_box .thumb .img1 { background:#00a651;} .s04_list .s04_box .thumb .img2 { background:url(./image/main/s04_bg1.jpg) no-repeat;background-size:cover} .s04_list .s04_box .thumb .img3 { background:url(./image/main/s04_bg2.jpg) no-repeat;background-size:cover} .s04_list .s04_box .thumb:before{content:''; position:absolute;left:0; width:100%;z-index:1 } .s04_list .s04_box:nth-child(1) .thumb:before{ bottom:50px; height:250px;background:url(./image/main/s04_bg3.jpg) no-repeat 50% 100%; background-size: auto 100%; } /*.s04_list .s04_box:nth-child(2) .thumb:before{ bottom:0px;height:300px;background:url(./image/main/s04_bg4.png) no-repeat 50% 100%; background-size: auto 100%;}*/ .s04_list .s04_box:nth-child(3) .thumb:before{ bottom:55px;height:310px;background:url(./image/main/s04_bg5.png) no-repeat 50% 100%; background-size: auto 100%;} .s04_list .s04_box .s_info {position:relative; display:block;width:100%; padding:100px 0 350px 0; vertical-align:middle; z-index:101;} .s04_list .s04_box .s_info .s_cate {display:inline-block; padding:0 25px; line-height:47px; } .s04_list .s04_box .s_info /*.s04_list .s04_box:nth-child(2) .s_info .s_cate:before{ content:''; position:absolute; top:-100px; right:-150px; width:500px; height:70px;background:url(./image/main/s04_img1.png) no-repeat; background-size:100% auto;}*/ .s04_list .s04_box .s_info .s_tit {display:block; overflow:hidden;} .s04_list .s04_box .s_info .s_tit strong { transition:color .15s ease-out;} .s04_list .s04_box .s_info .s_txt {display:block; color:#eeec1c;} .s04_list .s04_box .s_info .s_txt .st {display:block; position:relative; margin-top:10px;} .s04_list .s04_box .s_info .s_txt .st:first-child {margin-top:0;} .s04_list .s04_box .s_info .s_date {display:block; margin-top:25px; color:#9b9b9b; font-size:18px; font-weight:100; line-height:140%;} .s04_list .s04_box .day-care img{ width:70%; max-width:500px;} .s04_list .s04_box .day-care ul{ margin-bottom:20px;} .s04_list .s04_box .day-care li{ display:inline-block; vertical-align:top; margin-right:30px; background:#fff; color:#36C; padding:10px 20px; border-radius:10px;} .s04_list .s04_box .day-care li .fs25{ font-weight:600;} .s04_list .s04_box .day-care li:last-child{ margin-right:0;} .s04_list .s04_box .day-care dl{ text-align:left; padding:0 50px;} .s04_list .s04_box .day-care dl dt{ font-size:23px; font-weight:600; margin-top:20px; color:#6FF} .s04_list .s04_box .fs30{ display:inline-block;border-radius:30px; padding:5px 30px;} .s04_list .s04_box:nth-child(1) .fs30{ color:#009a4b; background:#eeec1c} .s04_list .s04_box:nth-child(3) .fs30{ color:#008d9a; background:#fff;} #s05{ background:#f5f5f5;} .widget_notice{ margin:0 10%;} .widget_notice li{ display:inline-block; width:calc((100% / 4) - 26px); margin-right:30px; background:#fff; vertical-align:top; } .widget_notice li:last-child{ margin-right:0;} .widget_notice dl{ position:relative; margin:30px;} .widget_notice dl dt{ position:absolute; top:0; right:0; text-align:center;} .widget_notice dl dt .date { line-height:33px; color:#777;} .widget_notice dl dt .date span{ color:#333;} .widget_notice dl dd{ margin-right:90px;} .widget_notice dl dd span{display:block;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;height:60px;margin:10px 0;text-overflow: ellipsis;white-space: normal;word-break: keep-all; word-wrap: break-word;font-synthesis: none;text-rendering: optimizeLegibility;box-sizing: border-box; color:#666;} .widget_notice dl dd p{display:block;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;height:60px;margin:10px 0;text-overflow: ellipsis;white-space: normal;word-break: keep-all; word-wrap: break-word;font-synthesis: none;text-rendering: optimizeLegibility;box-sizing: border-box; color:#666;} .widget_notice .thumb { display: block;width: 100%;height: 270px;} .widget_notice .area{ padding:20px; height:110px;} .widget_notice .area p{ margin-top:10px;} #s06{ position:relative;} #s06:before{ content:''; position:absolute; top:0; left:0;width:100%;height:150px;background:#f5f5f5; z-index:-1;} #s06 .area{ background:#fff; margin:0 10%;} #s06 .area .in_area{ padding:150px; padding-bottom:0; width:calc(100% - 300px); display:table; } #s06 .area .in_area > div{ float:left;position:relative;} #s06 .area .in_area .box_area{ position:relative; } #s06 .area .in_area .box1, #s06 .area .in_area .box2, #s06 .area .in_area .box3{ height:487px} #s06 .area .in_area .box4, #s06 .area .in_area .box5{ height:472px;} #s06 .area .in_area .box1, #s06 .area .in_area .box4{ width:44%;} #s06 .area .in_area .box5{ width:56%;} #s06 .area .in_area .box2, #s06 .area .in_area .box3{ width:28%;} #s06 .area .in_area .box1{ background:#63C} #s06 .area .in_area .box2{ background:#58b035;} #s06 .area .in_area .box2 a{ color:#fff;} #s06 .area .in_area .box2 .fs23{display:block;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3;overflow: hidden;height:95px;text-overflow: ellipsis;white-space: normal; margin-right:80px;} #s06 .area .in_area .box2 .fs19{display:block;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:8;overflow: hidden;height:225px;text-overflow: ellipsis;white-space: normal;} #s06 .area .in_area .box2 .box_area:before{ content:''; position:absolute; top:0; right:0; width:70px; height:70px; background:url(./image/main/icon_blog.jpg) no-repeat; background-size:100% auto; z-index:0;} #s06 .area .in_area .box3{ position:relative; text-align:center;} #s06 .area .in_area .box3:before{ content:''; position:absolute; bottom:0;left:0;width:100%; height:200px; background:#0f3c19; z-index:-1;} #s06 .area .in_area .box3 img {width:48%;box-shadow: 0 13px 21px 0 rgba(0, 0, 0, .2); margin:25px 0 10px 0;} #s06 .area .in_area .box3 .dTxt{ color:#fff;} #s06 .area .in_area .box4{ background:#fff url(./image/main/s06_box4_bg_2.jpg) 100% 100% no-repeat;} #s06 .area .in_area .box4:before{content:''; position:absolute; top:0; left:-500px;width:500px;height:100%;background:#e5eed9;} #s06 .area .in_area .box4 .fs23{ text-decoration:underline;} #s06 .area .in_area .box4 a.button--aylen{ background:#fff; color:#555; border:1px #ddd solid;} #s06 .area .in_area .box4 a.button--aylen span::before{ color:#555;} #s06 .area .in_area .box4 a.button--aylen:hover span::before{ color:#fff;} #s06 .area .in_area .box5 li{ position:relative; float:left; width:calc( 100% / 4); height:236px; text-align:center; vertical-align:middle; background-size:auto 147px;} #s06 .area .in_area .box5 li:nth-child(1){ background:#f5f0e6 url(./image/main/s06_logo4.jpg) no-repeat 50% 50%; } #s06 .area .in_area .box5 li:nth-child(2){ background:#e9e4da url(./image/main/s06_logo2.jpg) no-repeat 50% 50%;} #s06 .area .in_area .box5 li:nth-child(3){ background: url(./image/main/s06_logo3.jpg) no-repeat 50% 50%;} #s06 .area .in_area .box5 li:nth-child(4){background:#f0f0f0 url(./image/main/s06_logo1.jpg) no-repeat 50% 50%; } #s06 .area .in_area .box5 li:nth-child(5){background: url(./image/main/s06_logo6.jpg) no-repeat 50% 50%; } #s06 .area .in_area .box5 li:nth-child(6){ background: url(./image/main/s06_logo5.jpg) no-repeat 50% 50%;} #s06 .area .in_area .box5 li:nth-child(7){background:#f0f0f0 url(./image/main/230525_s06_logo1.jpg) no-repeat 50% 50%; } #s06 .area .in_area .box5 li:nth-child(8){ background: url(./image/main/230525_s06_logo2.jpg) no-repeat 50% 50%;} #s06 .area .in_area .box5 a{display: block; width:100%; height:100%; text-indent: -9999px;font-size: 0;line-height: 0;} .video_wrapper{position:relative; width:100%; height:132px; margin:0 auto; background-color:#000;} .video_wrapper_full{padding-top:355px;} .videoIframe{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:transparent;} .videoPoster{position:absolute; opacity:1; overflow:hidden; top:0px; left:0px; width:100%; height:100%; background-size:100%; border:none; text-indent:-999em; transition:opacity 800ms, height 0s; -webkit-transition:opacity 800ms, height 0s; -moz-transition:opacity 800ms, height 0s; -webkit-transition-delay:0s, 0s; -moz-transition-delay:0s, 0s; transition-delay:0s, 0s;background:url(./image/main/maxresdefault.jpg) no-repeat 50% 50%; background-size:cover } .videoPoster:hover{cursor:pointer;} .videoPoster:before{content:''; position:absolute; top:50%; left:50%; z-index:2; width:96px; height:96px; margin:-48px 0 0 -48px; background:url(./image/main/icon_play.png) no-repeat 50% 50%; transition:border-color 300ms; border-radius:100%; -webkit-transition:border-color 300ms; -moz-transition:border-color 300ms;} .videoPoster:after{content:''; position:absolute; opacity:0.2; top:0; left:0; z-index:1; width:100%; height:100%; background:#000; transition:all 0.4s ease-out 0s;} .videoPoster:hover:after, .videoPoster:focus:after{opacity:0.4;} .videoPoster:hover:after, .videoPoster:focus:after{border-left-color:#f00;} .videoWrapperActive .videoPoster{opacity:0; height:0; -webkit-transition-delay:0s, 800ms; -moz-transition-delay:0s, 800ms; transition-delay:0s, 800ms;} .newsletter { } .newsletter li .thumb {position:absolute; bottom:90px; left:50%; width:48%; margin-left:-24%;box-shadow: 0 13px 21px 0 rgba(0, 0, 0, .2);} .newsletter a{ color:#fff; display:block; width:100%; height:100%;} .newsletter .fs20{position:absolute; bottom:40px; width:100%;} #s07{background:url(./image/main/s07_bg.jpg) no-repeat 50% 50%; background-size:cover;} #s07 ul{ display:flex; flex-wrap: wrap; gap:20px; margin:0 10%;justify-content: center;} #s07 li{width:calc((100% / 9) - 18px); border:3px #fbaf5d solid; vertical-align:top; padding:50px 0; box-sizing:border-box;background-size:auto 92px; background-position:50% 50px; background-repeat:no-repeat;} #s07 li p{ display:inline-block; height:60px; padding-top:110px; color:#fff;} #s07 .ps{ line-height:60px;} #s07 li:nth-child(1){background-image:url(./image/main/s07_logo1.png);} #s07 li:nth-child(2){background-image:url(./image/main/s07_logo2.png);} #s07 li:nth-child(3){background-image:url(./image/main/s07_logo3.png);} #s07 li:nth-child(4){background-image:url(./image/main/s07_logo4.png);} #s07 li:nth-child(5){background-image:url(./image/main/s07_logo5.png);} #s07 li:nth-child(6){background-image:url(./image/main/s07_logo6.png);} #s07 li:nth-child(7){background-image:url(./image/main/s07_logo7.png);} #s07 li:nth-child(8){background-image:url(./image/main/s07_logo8.png);} /*#s07 li:nth-child(9){background:url(./image/main/s07_logo9.png) no-repeat;}*/ #s07 li:nth-child(9){background-image:url(./image/main/s07_logo10.png);} #s07 li:nth-child(10){background-image:url(./image/main/s07_logo11.png);} #s07 li:nth-child(11){background-image:url(./image/main/s07_logo12.png);} #s07 li:nth-child(12){background-image:url(./image/main/s07_logo13.png);} #s07 li:nth-child(13){background-image:url(./image/main/s07_logo14.png);} #s07 li:nth-child(14){background-image:url(./image/main/s07_logo19.png);} #s07 li:nth-child(15){background-image:url(./image/main/s07_logo15.png);} #s07 li:nth-child(16){background-image:url(./image/main/s07_logo16.png);} #s07 li:nth-child(17){background-image:url(./image/main/s07_logo17.png);} #s07 li:nth-child(18){background-image:url(./image/main/s07_logo18.png);} .down_arrow{ position:fixed; right:30px; bottom:30px; width:70px; height:70px; text-align:center; line-height:70px; border-radius:50%; background:#fff; z-index:11; font-size:0;} .down_arrow:before{ content:'\e905';font-family:xeicon; font-size:30px;} .btn_top {position:fixed; right:50px; bottom:50px; z-index:500; display:none;} .btn_top a {display:block; width:60px; height:60px; background:#555 url('./img/ico_arr_up.png') no-repeat center center; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; transition:background-color .3s; -webkit-transition:background-color .3s; -moz-transition:background-color .3s; -o-transition:background-color .3s; } .btn_top a:hover, .btn_top a:active {background-color:#6cbb5a} @media screen and (max-width: 1920px){ /* s02 */ #s02 .cs{top:-78px;} #s02:before{ height:440px; } .s02_list {margin:0 10%;} .s02_list .area{ height:230px; } #s02 .cs > div{ padding:15px 0;} /* s03 */ .ico_ {width:100px; height:100px;} .ico_.story01, .ico_.story02, .ico_.story03, .ico_.story04, .ico_.story05, .ico_.story06, .ico_.story07{ background-size: auto 70px} /* s04 */ .s04_list .s04_box {height:622px;} .s04_list .s04_box .s_info{padding:80px 0 260px 0;} .s04_list .s04_box:nth-child(1) .thumb:before{height:170px;} .s04_list .s04_box:nth-child(2) .thumb:before{height:250px;} .s04_list .s04_box:nth-child(3) .thumb:before{height:240px;} .s04_list .s04_box .s_info .s_cate {line-height:40px; } .s04_list .s04_box:nth-child(2) .s_info .s_cate:before{width:400px; top:-85px; right:-120px} .s04_list .s04_box .s_info .s_cate{ margin:10px 0;} .s04_list .s04_box .day-care li{ margin-right:15px;} .s04_list .s04_box .day-care li .fs25{ font-size:20px;} .s04_list .s04_box .day-care dl{ font-size:16px;} .s04_list .s04_box .day-care dl dt{ font-size:20px; margin-top:10px;} .widget_notice dl dt .date { line-height:27px;} .widget_notice dl dd{ margin-right:75px;} .widget_notice .thumb {height: 220px;} .widget_notice dl dd span{ height:55px;} .widget_notice .area{height:90px;} #s06:before{ height:120px;} #s06 .area .in_area{ padding:120px; padding-bottom:0; width:calc(100% - 240px);} #s06 .area .in_area .box1, #s06 .area .in_area .box2, #s06 .area .in_area .box3{ height:365px} #s06 .area .in_area .box4, #s06 .area .in_area .box5{ height:390px;} .video_wrapper_full{ padding-top:233px;} .videoPoster:before{width:70px; height:70px; margin:-35px 0 0 -35px; background-size:100% auto;} #s06 .area .in_area .box4{ background-size:60% auto;} #s06 .area .in_area .box2 .fs23{height:75px;margin-right:70px;} #s06 .area .in_area .box2 .fs19{;-webkit-line-clamp:7;height:170px;} #s06 .area .in_area .box2 .box_area:before{width:50px;} #s06 .area .in_area .box3:before{height:150px;} .newsletter li .thumb {bottom:80px;} #s06 .area .in_area .box5 li{height:195px;} #s06 .area .in_area .box5 li:nth-child(1), #s06 .area .in_area .box5 li:nth-child(2), #s06 .area .in_area .box5 li:nth-child(3), #s06 .area .in_area .box5 li:nth-child(4), #s06 .area .in_area .box5 li:nth-child(5), #s06 .area .in_area .box5 li:nth-child(6), #s06 .area .in_area .box5 li:nth-child(7), #s06 .area .in_area .box5 li:nth-child(8) { background-size:auto 100px;} .newsletter li .thumb {width:46%; margin-left:-23%;} #s07 li{ padding:30px 0;background-position: 50% 30px;} #s07 li p{ font-size:13px; height:45px; line-height:19px; padding-top:80px;} #s07 .ps{ line-height:45px;} #s07 li:nth-child(1), #s07 li:nth-child(2), #s07 li:nth-child(3), #s07 li:nth-child(4), #s07 li:nth-child(5), #s07 li:nth-child(6), #s07 li:nth-child(7), #s07 li:nth-child(8), #s07 li:nth-child(9), #s07 li:nth-child(10), #s07 li:nth-child(11), #s07 li:nth-child(12), #s07 li:nth-child(13), #s07 li:nth-child(14), #s07 li:nth-child(15), #s07 li:nth-child(16), #s07 li:nth-child(17), #s07 li:nth-child(18), #s07 li:nth-child(19){ background-size:auto 72px;} .layerPopup { max-width: 1300px; } a.button--aylen span:before{ font-size:17px; top:-3px; } } @media screen and (max-width: 1800px){ #s02 .cs{width: calc(100% - 10%); margin:0 5%;} } @media screen and (max-width: 1720px){ .s02_list{ margin:0 15px;} .s02_list .area{ height:320px;} #s03 .icon{ margin:0 10%;} .s04_list .s04_box .thumb{ width:calc(100% - 40px); padding:0 20px;} .s04_list .s04_box .s_info.ani_obj .s_tit br{ display:none;} .s04_list .s04_box:nth-child(2) .s_info .s_cate::before{ width:100%; right:0;} .widget_notice{ margin:0 15px;} #s06 .area{ margin:0 15px;} #s06::before{ display:none} #s07 ul{ margin:0 15px;} } @media screen and (max-width: 1500px){ #s02 .cs{ position:relative; margin:0; top:0; width:100%;} #s02 .cs .cs_tel{ border-radius:0;} #s02 .cs .advice{ border-radius:0;} .s02_list .btn_more{ position:relative; margin-top:30px;} #s03 .icon{ margin:0 5%;} #s03 .icon > li{width: calc((100% - 20px) / 7);} #s07 li:nth-child(1), #s07 li:nth-child(2), #s07 li:nth-child(3), #s07 li:nth-child(4), #s07 li:nth-child(5), #s07 li:nth-child(6), #s07 li:nth-child(7), #s07 li:nth-child(8), #s07 li:nth-child(9), #s07 li:nth-child(10), #s07 li:nth-child(11), #s07 li:nth-child(12), #s07 li:nth-child(13), #s07 li:nth-child(14), #s07 li:nth-child(15), #s07 li:nth-child(16), #s07 li:nth-child(17), #s07 li:nth-child(18), #s07 li:nth-child(19) { background-size:auto 60px; background-position:center 35px;} #s07 li{width:calc((100% / 9) - 18px); } #s07 li p{ padding-top:90px;} .layerPopup .slick-arrow { width: 2rem; height:2rem;} .layerPopup .slick-arrow:before { width: 2rem; height: 2rem; font-size: 2rem; } .layerPopup .slick-arrow.slick-prev {left: -2.5rem;} .layerPopup .slick-arrow.slick-next {right: -2.5rem;} } @media screen and (max-width: 1300px){ #s02 .cs dl{margin-left: 15%;} #s02 .cs dl:nth-child(1) dt{ margin-bottom:10px; margin-left: 30px;} #s02 .cs .advice dl::before{ width:100px; background-size:100% auto;left: -110px;} #s06 .area .in_area .box3 img {width:165px;} #s04 .ac{ text-align:left;} .s04_list .s04_box{height:auto;} .s04_list .s04_box:nth-child(1){ width:100%; height:450px;} .s04_list .s04_box:nth-child(2), .s04_list .s04_box:nth-child(3){ width:100%;} .s04_list .s04_box .thumb{ padding:0 50px;width:calc(100% - 100px);} .s04_list .s04_box .s_info{ padding:100px 0;} .s04_list .s04_box .s_info .s_cate{ padding:0; position:relative;} .s04_list .s04_box .day-care dl{ padding:0;} .s04_list .s04_box:nth-child(1) .thumb:before{ display:none} .s04_list .s04_box:nth-child(2) .thumb:before{ display:none;} .s04_list .s04_box:nth-child(3) .thumb:before{ background-position:90% 0; height:300px; bottom:70px;} .s04_list .s04_box:nth-child(3) .s_info .s_tit{ padding-right:55%;} .widget_notice dl dd span{ height:50px;} .widget_notice li{width: calc((100% / 3) - 22px);} .widget_notice ul.ani_obj.ani_on li:nth-child(3){ margin-right:0;} .widget_notice ul.ani_obj.ani_on li:nth-child(4){ display:none;} #s06 .area .in_area{ padding:120px 5%;width: calc(100% - 10%);} .down_arrow{ display:none;} #s07 ul {gap:10px;} #s07 li{width:calc((100% / 7) - 9px); } } @media screen and (max-width: 1024px){ #s02 .cs dl{ margin:0 20px;} #s02 .cs .advice dl::before{ display:none;} #s02 .cs .advice .check{ margin:0;} #s02 .cs dl{text-align:center;} #s02 .cs dl dd{ width:100%; } #s02 .cs .advice dl dd > div{ width:100%;} #s02 .cs .advice .check{ margin-right:15px;} #s02 .cs .advice .check, #s02 .cs .advice .sendBtn{ width:auto; display:inline-block;} .main-online-left{ margin-bottom:15px;} .main-online-input i::before{ left:0;} .s02_list ul li{ width:100%;} .s02_list .area{ height:auto; margin:50px;} #s03 .icon > li{width: calc((100% - 20px) / 4);} #s03 .icon > li:nth-child(1n){ margin-bottom:15px;} #s06 .area .in_area .box3 img {width:140px;} #s06 .area .in_area .box3 .dTxt{ color:#333;} #s06 .area .in_area{ padding:0 0 100px 0; width:100%;} #s06 .area .in_area .box1, #s06 .area .in_area .box4{ width:65%;} #s06 .area .in_area .box2, #s06 .area .in_area .box3{ width:35%;} #s06 .area .in_area .box3{ background:#e5eed9 } #s06 .area .in_area .box3 .fs27{ padding-top:35px;} #s06 .area .in_area .box4{ height:365px;} #s06 .area .in_area .box4::before{ display:none;} #s06 .area .in_area .box5{ width:100%;} .newsletter a{ text-align:center;} .newsletter li .thumb{ width:140px; margin-left:-70px;} #s07 ul{justify-content:flex-start;} #s07 .ac{ text-align:left;} #s07 li:nth-child(1), #s07 li:nth-child(2), #s07 li:nth-child(3), #s07 li:nth-child(4), #s07 li:nth-child(5), #s07 li:nth-child(6), #s07 li:nth-child(7), #s07 li:nth-child(8), #s07 li:nth-child(9), #s07 li:nth-child(10), #s07 li:nth-child(11), #s07 li:nth-child(12), #s07 li:nth-child(13), #s07 li:nth-child(14), #s07 li:nth-child(15), #s07 li:nth-child(16), #s07 li:nth-child(17) , #s07 li:nth-child(18) , #s07 li:nth-child(19) { background-size:auto 60px; background-position:20px 50%;} #s07 li{width:calc((100% / 3) - 7px); min-height:auto; text-align:left; padding:20px 0;} #s07 li p{ padding-top:10px; padding-left:110px;} a.button--aylen{ height:40px; line-height:40px; width:135px;} a.button--aylen span::before{ right:-95px;} } @media screen and (max-width: 1000px){ .s04_list .s04_box:nth-child(1){ height:520px;} } @media screen and (max-width: 900px){ .s04_list .s04_box:nth-child(3) .thumb:before{ background-position:95% 0; height:270px;} .widget_notice li{width: calc((100% / 2) - 12px); margin-right:20px; margin-bottom:20px} .widget_notice ul.ani_obj.ani_on li:nth-child(2){ margin-right:0;} .widget_notice ul.ani_obj.ani_on li:nth-child(3){ margin-right:20px; margin-bottom:0;} .widget_notice ul.ani_obj.ani_on li:nth-child(4){ display:inline-block; margin-bottom:0;} #s06 .area .in_area .box4 .pd100{ padding:50px;} #s07 li{width:calc((100% / 2) - 5px);} } @media screen and (max-width: 750px){ .s04_list .s04_box .s_info{ padding:70px 0;} .s04_list .s04_box:nth-child(1), .s04_list .s04_box:nth-child(2){ width:100%; height:auto;} .s04_list .s04_box:nth-child(2) .s_info .s_cate::before{ left:0;top: -65px; width:400px;} .s04_list .s04_box:nth-child(1) .s_info .s_txt{ text-align:center;} .s04_list .s04_box:nth-child(3) .s_info .s_tit{ padding-right:0;} .s04_list .s04_box:nth-child(3) .thumb::before{ background-position:50% 100%; background-size:250px auto;} .s04_list .s04_box:nth-child(3) .thumb{ padding-bottom:250px;} } @media screen and (max-width: 640px){ #LayerPopupList{ margin:20px auto} .layerPopup h3{ font-size:25px; width: calc(100% - 6rem); margin:0 auto; text-align:left;} .layerPopup .slick-counter{ margin-left:auto; left:auto; right:3rem;} .s02_list ul li:nth-child(2) img{ max-width:382px; width:100%;} .s02_list ul li .fs20 br{ display:none;} #s03 .icon > li{width: calc((100% - 10px) / 4);} .ico_{ width:85px; height:85px;} .ico_.story01, .ico_.story02, .ico_.story03, .ico_.story04, .ico_.story05, .ico_.story06, .ico_.story07{ background-size:auto 60px} .s04_list .s04_box:nth-child(2) .s_info .s_cate::before{ width:350px;} .s04_list .s04_box .thumb { padding: 0 30px; width: calc(100% - 60px);} .s04_list .s04_box .day-care { text-align:center;} .s04_list .s04_box .day-care img{ width:85%;} .s04_list .s04_box .day-care li{ width:calc(100% - 40px); margin:0 0 10px 0; text-align:center;} .widget_notice li{width:100%;margin-right:0; margin-bottom:20px} .widget_notice ul.ani_obj.ani_on li:nth-child(2){ margin-right:0;} .widget_notice ul.ani_obj.ani_on li:nth-child(3){ margin:0 0 20px 0;} .widget_notice ul.ani_obj.ani_on li:nth-child(4){ margin:0;} .widget_notice .area{height:auto} #s06 .area{ margin:0;} #s06 .area .in_area{ padding-bottom:0} #s06 .area .in_area .box1, #s06 .area .in_area .box4, #s06 .area .in_area .box5{ width:100%;} #s06 .area .in_area .box2, #s06 .area .in_area .box3{ width:50%;} #s06 .area .in_area .box5{ height:auto;} #s06 .area .in_area .box5 li{width: calc( 100% / 2); height:130px;} #s06 .area .in_area .box5 li:nth-child(1), #s06 .area .in_area .box5 li:nth-child(2), #s06 .area .in_area .box5 li:nth-child(3), #s06 .area .in_area .box5 li:nth-child(4), #s06 .area .in_area .box5 li:nth-child(5), #s06 .area .in_area .box5 li:nth-child(6){ background-size: auto 100px;} #s07 li:nth-child(1){background-size:auto 40px;} #s07 li:nth-child(2), #s07 li:nth-child(3), #s07 li:nth-child(4), #s07 li:nth-child(5), #s07 li:nth-child(6), #s07 li:nth-child(7), #s07 li:nth-child(8), #s07 li:nth-child(9), #s07 li:nth-child(10), #s07 li:nth-child(11), #s07 li:nth-child(12), #s07 li:nth-child(13), #s07 li:nth-child(14), #s07 li:nth-child(15){ background-size:auto 45px; background-position:20px 20px;} #s07 li p{ padding-left:80px; padding-top:0;} } @media screen and (max-width: 580px){ #s02 .cs .cs_tel .fs27{ font-size:16px;} #s02 .cs dl{ line-height:25px;} .main-online-input:nth-child(2){ width:calc(100% - 177px);} .main-online-input select{ width:100%; background:none; padding-right:10px;} .main-online-input input{ width:85%;} .main-online-input{padding: 0 0px 0 40px;} #s06 .area .in_area .box1{ height:300px;} .video_wrapper_full { padding-top: 168px;} #s06 .area .in_area .box2 .mg70{ margin:35px;} #s06 .area .in_area .box2, #s06 .area .in_area .box3{ width:100%;} #s06 .area .in_area .box4 .mb50{ margin-bottom:30px;} #s06 .area .in_area .box2{ height: auto} #s07 li{ width: calc((100% / 2) - 5px); padding:10px 0;border: 1px #fbaf5d solid;} #s07 li:nth-child(1), #s07 li:nth-child(2), #s07 li:nth-child(3), #s07 li:nth-child(4), #s07 li:nth-child(5), #s07 li:nth-child(6), #s07 li:nth-child(7), #s07 li:nth-child(8), #s07 li:nth-child(9), #s07 li:nth-child(10), #s07 li:nth-child(11), #s07 li:nth-child(12), #s07 li:nth-child(13), #s07 li:nth-child(14), #s07 li:nth-child(15) {background-size:auto 50px;background-position:20px 7px; } #s07 li:nth-child(3), #s07 li:nth-child(4), #s07 li:nth-child(5), #s07 li:nth-child(6), #s07 li:nth-child(7), #s07 li:nth-child(8), #s07 li:nth-child(9), #s07 li:nth-child(10), #s07 li:nth-child(11), #s07 li:nth-child(12), #s07 li:nth-child(13), #s07 li:nth-child(14), #s07 li:nth-child(15), #s07 li:nth-child(16), #s07 li:nth-child(17), #s07 li:nth-child(18), #s07 li:nth-child(19){ background-size:auto 40px; background-position:22px 15px; } #s07 li:nth-child(15){ margin-bottom:0;} #s07 li p{ padding-left:100px;} #s07 li:nth-child(1) p, #s07 li:nth-child(2) p { padding-left:100px;} } @media screen and (max-width: 480px){ #s02 .cs dl dt{ padding-left:27px;} #s02 .cs .advice .check{ margin-right:0;} #s02 .cs .advice .sendBtn{margin-top:10px; display:block} #s02 .cs .advice .sendBtn a{ display:block} #s02 .cs .cs_tel .fs25{ font-size:17px;} #s02 .cs .cs_tel .fs27{ font-size:15px;} #s02 .cs .cs_tel .fs27 a{ background:none; padding:0; margin:0; color:#14e1ff} #s02 .cs .cs_tel dl dt::before, #s02 .cs dl dt::before{ width:20px; height:20px;} .main-online-input{ height:35px; line-height:35px;} .s02_list .area{margin:50px 30px;} .s02_list ul li:nth-child(1){background-position:100% 100%; background-size:100% auto;} #s03 .icon{ margin:0 10px;} .ico_{ width:65px; height:65px;} .ico_.story01, .ico_.story02, .ico_.story03, .ico_.story04, .ico_.story05, .ico_.story06, .ico_.story07{ background-size:auto 50px} .s04_list .s04_box .s_info .s_cate{ line-height:30px;} .s04_list .s04_box:nth-child(3) .s_info .s_txt .fs30{ font-size:20px;} #s06 .area .in_area .box4 .pd100{ padding:50px 30px 0 30px;} #s06 .area .in_area .box5 li{ height:100px;} #s06 .area .in_area .box5 li:nth-child(1), #s06 .area .in_area .box5 li:nth-child(2), #s06 .area .in_area .box5 li:nth-child(3), #s06 .area .in_area .box5 li:nth-child(4), #s06 .area .in_area .box5 li:nth-child(5), #s06 .area .in_area .box5 li:nth-child(6){ background-size:auto 80px;} #s07 li{ width:100%;} #s07 li:nth-child(3), #s07 li:nth-child(4), #s07 li:nth-child(5), #s07 li:nth-child(6), #s07 li:nth-child(7), #s07 li:nth-child(8), #s07 li:nth-child(9), #s07 li:nth-child(10), #s07 li:nth-child(11), #s07 li:nth-child(12), #s07 li:nth-child(13), #s07 li:nth-child(14), #s07 li:nth-child(15), #s07 li:nth-child(16), #s07 li:nth-child(17){ background-size:auto 45px; background-position:20px 12px; } #s07 li p{ padding-left:100px;} #s02 .cs .cs_tel dd{ background:none;} } @media screen and (max-width: 370px){ .layerPopup h3{ font-size:20px;} } /* scroll animation */ @media (min-width:1024px) { .sec_tit.ani_obj {opacity:0; transform:translateY(100px) rotate(0.0001deg); transition:transform 1.6s cubic-bezier(0.23, 1, 0.38, 1), opacity 1.6s cubic-bezier(0.23, 1, 0.38, 1);} .sec_tit.ani_obj.ani_on {opacity:1; transform:translateY(0) rotate(0.0001deg);} /* s02 */ .s02_list ul.ani_obj li {opacity:0; transform:translateY(100px) rotate(0.0001deg); transition:transform 1.6s cubic-bezier(0.23, 1, 0.38, 1), opacity 1.6s cubic-bezier(0.23, 1, 0.38, 1);} .s02_list ul.ani_obj.ani_on li:nth-child(1) {transition-delay:.4s;} .s02_list ul.ani_obj.ani_on li:nth-child(2) {transition-delay:.6s;} .s02_list ul.ani_obj.ani_on li:nth-child(3) {transition-delay:.8s;} .s02_list ul.ani_obj.ani_on li:nth-child(4) {transition-delay:1s;} .s02_list ul.ani_obj.ani_on li {opacity:1; transform:translateY(0) rotate(0.0001deg);} /* s03 */ .icon.ani_obj {opacity:0; transform:translateY(100px) rotate(0.0001deg); transition:transform 1.6s cubic-bezier(0.23, 1, 0.38, 1), opacity 1.6s cubic-bezier(0.23, 1, 0.38, 1);} .icon.ani_obj.ani_on {opacity:1; transform:translateY(0) rotate(0.0001deg);} /* s04 */ .s04_list .s04_box .thumb.ani_obj {opacity:0; transition:opacity 1.6s cubic-bezier(0.23, 1, 0.38, 1) .2s;} .s04_list .s04_box .thumb.ani_obj.ani_on {opacity:1;} .s04_list .s04_box .thumb.ani_obj:after {content:""; display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#fff; z-index:99; transform:translate3d(0, 0, 0) rotate(0.0001deg); transition:all 1.7s cubic-bezier(0.23, 1, 0.38, 1) .2s;} .s04_list .s04_box .thumb.ani_obj.ani_on:after {transform:translate3d(101%, 0, 0) rotate(0.0001deg);} .s04_list .s04_box .s_info.ani_obj .s_cate, .s04_list .s04_box .s_info.ani_obj .s_tit, .s04_list .s04_box .s_info.ani_obj .s_txt, .s04_list .s04_box .s_info.ani_obj .s_date, .s04_list .s04_box .s_info.ani_obj .btn_more {opacity:0; transform:translateY(50px) rotate(0.0001deg); transition:transform 1.6s cubic-bezier(0.23, 1, 0.38, 1), opacity 1.6s cubic-bezier(0.23, 1, 0.38, 1);} .s04_list .s04_box .s_info.ani_obj .s_cate {transition-delay:.4s;} .s04_list .s04_box .s_info.ani_obj .s_tit {transition-delay:.6s;} .s04_list .s04_box .s_info.ani_obj .s_txt {transition-delay:.8s;} .s04_list .s04_box .s_info.ani_obj .s_date {transition-delay:.8s;} .s04_list .s04_box .s_info.ani_obj .btn_more {transition-delay:1s;} .s04_list .s04_box .s_info.ani_obj.ani_on .s_cate, .s04_list .s04_box .s_info.ani_obj.ani_on .s_tit, .s04_list .s04_box .s_info.ani_obj.ani_on .s_txt, .s04_list .s04_box .s_info.ani_obj.ani_on .s_date, .s04_list .s04_box .s_info.ani_obj.ani_on .btn_more {opacity:1; transform:translateY(0) rotate(0.0001deg);} /* s05 */ .widget_notice ul.ani_obj li {opacity:0; transform:translateY(100px) rotate(0.0001deg); transition:transform 1.6s cubic-bezier(0.23, 1, 0.38, 1), opacity 1.6s cubic-bezier(0.23, 1, 0.38, 1);} .widget_notice ul.ani_obj.ani_on li:nth-child(1) {transition-delay:.4s;} .widget_notice ul.ani_obj.ani_on li:nth-child(2) {transition-delay:.6s;} .widget_notice ul.ani_obj.ani_on li:nth-child(3) {transition-delay:.8s;} .widget_notice ul.ani_obj.ani_on li:nth-child(4) {transition-delay:1s;} .widget_notice ul.ani_obj.ani_on li {opacity:1; transform:translateY(0) rotate(0.0001deg);} .in_area.ani_obj {opacity:0; transform:translateY(100px) rotate(0.0001deg); transition:transform 1.6s cubic-bezier(0.23, 1, 0.38, 1), opacity 1.6s cubic-bezier(0.23, 1, 0.38, 1);} .in_area.ani_obj.ani_on {opacity:1; transform:translateY(0) rotate(0.0001deg);} .s07_list.ani_obj {opacity:0; transform:translateY(100px) rotate(0.0001deg); transition:transform 1.6s cubic-bezier(0.23, 1, 0.38, 1), opacity 1.6s cubic-bezier(0.23, 1, 0.38, 1);} .s07_list.ani_obj.ani_on {opacity:1; transform:translateY(0) rotate(0.0001deg);} } @keyframes autoscroll { 0%{transform:translateY(50%);} 100%{transform:translateY(-100%);} }