::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #fe57a1; color: #fff; text-shadow: none; } /* 초기화 */ html, body, form, div, p, dl, dt, dd, ul, ol, li, h1 { border: 0; // margin: 0; // padding: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } // 세콘다리 픽스 html, body { height: auto; } table { border-spacing: 0; border-collapse: collapse; margin: 0; padding: 0; th { vertical-align: middle !important; text-align: center !important; } } input { margin: 0; } a img { border: 0; } .img-polaroid { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* COMMMON */ ul { list-style: none; } .clearfix { clear: both; } .text-justify { text-align: justify; } .text-cut { // width: 150px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .hidden_file { /* display: none !important; */ display: inline-block; *zoom:1; *display: inline; } .cover_file { } .upload_file button,.upload_file div,.upload_file input { display: inline-block; *zoom:1; *display: inline; } .upload_file div.input-append { vertical-align: top; } textarea { resize:none; } .only_eng { ime-mode:inactive !important; } .only_kor { ime-mode:active !important; } .txt_center { text-align: center !important; } .txt_left { text-align: left !important; } .txt_right { text-align: right !important; } .shadow_box { padding: 30px 20px 50px; border: 1px solid #b3b3b3; border-radius: 4px; box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; } /* margins */ .btn_w_input { /* 인풋 옆의 스몰 버튼 마진 */ margin-bottom: 10px; } /* basic */ /* 게시판 테이블 */ .comment_list > li { clear: both; overflow: hidden; display: block; padding: 10px 0; margin-bottom: 10px; border-bottom: 1px dashed #ebebeb; // .photo { // float: left; // margin-right: 20px; // } // .detail { // margin-left: 100px; // } .writer { .name { color: #000 !important; } .date { color: #aaa !important; margin-left:10px; } } .comment_content { padding: 10px 0; } } .bbs_wrapper { // width: @container; } .bbs { } .bbs thead { background: #fff; border-bottom: 1px solid #fff; } .board { border-top: 2px solid #fff; border-bottom: 1px solid #fff; } .bbs th, .board th, .bbs_head { background: #fff !important; text-align: center!important; font-weight: normal !important; } .bbs_title_in_view { color: #84286a !important; font-size: 20px; text-align: center; } .bbs_view_title { color: #777; } .bbs_view_detail { font-weight: bold; color: #666; margin-left: 5px; margin-right: 30px; } .div4board { // width: 650px; // float: right; // background: white; // max-height: 400px; // border-top: 2px solid #e02d2c; // border-bottom: 2px solid #e02d2c; // overflow: auto; // margin-right: 35px; input { margin: 0; padding: 0 8px; } select { margin:0; height: auto; font-size: 11px; padding: 2px; } } .bbs_date { background: url('/resources/images/sogong/bbs_icon/icon_date.gif') no-repeat 0 2px; padding-left:20px; color: #888; /*line-height: 30px;*/ height: 30px; display: inline-block; } .box { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 0 10px 0; background: #fff; color: #505050; font-weight: bold; word-break: break-all; font-size: 1.2em; border-top: 1px solid #999; } .bbs_mb_info { color: #969696; padding: 10px 0 10px 0; text-align: center; border-bottom: solid 1px #c6c6c6; /*color: #505050;*/ } .bbs_title_liner { margin-top: -3px; width: 100px; height: 3px; background: #eb34b8; } .bbs_content { padding: 20px 0 0 0; /*border-bottom: 1px solid #999;*/ } .bbs_title { margin-top: -70px; margin-bottom: 30px; } /* join */ .mb_join { width: 80%; clear:both; background: #fff; padding: 20px 30px; margin: 50px auto !important; h3 { text-align: center; } } .mb_join .control-group { clear: both; overflow: hidden; } .mb_join label.control-label { font-weight: bold; vertical-align: top; padding-top: 7px; padding-right:20px; width: 130px; text-align: right; display: block; float: left; } .mb_join .controls { display: block; float: left; width:500px;} .personal { text-align: left; height: 200px; width: 485px; overflow-y: scroll; margin-left: 150px; } .mb_join input { } // 캘린더 .ui-datepicker-year, .ui-datepicker-month{ width: 40% !important; padding: 0 !important; } h1, h2, h3, h4, h5, h6{ font-weight: normal; margin: 0; line-height: 1.2; } h2 { margin: 20px 0; } /* site */ @main-color: #fff; @text-color : #424242; @url: '/resources/img/site/'; // @container: auto; @side: 205px; @bg-color: #fff; @font-size: 14px; @main-red: #d51e21; .main_red { color: @main-red !important; } .main_red_bg { background: @main-red !important; color: #fff; } .yellow_text { color: #F8D133 !important; } input, select, label { font-size: @font-size; } p, strong { word-break: normal; word-break: keep-all; } /* * NanumBarunGothic */ // @import url('/resources/css/nanumbarungothic.css'); .bold { font-weight: 700; } .text_cut { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } html { overflow-y: scroll; background: @bg-color; height: 100%; } body { // background: url('@{url}body_bg.png') repeat; // font-family: tahoma, "segoe UI", "Microsoft JhengHei", "Microsoft Yahei", meiryo, "malgun gothic" !important; font-family: 'Nanum Barun Gothic', Arial, sans-serif !important; line-height: normal; font-size: @font-size; // min-width: @container; color: @text-color; background: #fff; } // .bbs_title_list { // font-family: "Microsoft MingLiU", '新細明體', Helvetica, Arial, sans-serif !important; // } h1{ } h2{ } h3{ } h4 { font-size: 1.7em; padding-top: 25px; margin-bottom: 40px; background: #fff url('@{url}/h4_bg.png') 0 0 no-repeat; } h5 { font-size: 1.3em; margin: 20px 0; } .fifty { width: 50%; } @base-lh : 1.6; .bbs_wrapper p { /* line-height 적용 시 다른 게시판 타이틀에 문제 발생 가능성있음. */ // line-height: @base-lh; } .chapter { overflow: hidden; margin-bottom: 70px; p { text-align: left; line-height: @base-lh; margin-bottom: 15px; } img { box-sizing: inherit; margin-bottom: 5px; } } .in_chapter_margin { margin-top: 70px; } .mini_chapter_bottom { margin-bottom: 40px; } .thumb_img { img { display: block; margin: 0 auto; } p.desc { line-height: 1; background: #000; color: #fff; padding: 5px 10px; } } .basic_table { .border_right { border-right: 1px solid #dfdfdf; } width: 100%; // border-top: 2px solid @main-red; border-top: 1px solid #dfdfdf; margin-bottom: 10px; th,td { padding: 8px 15px; border-bottom: 1px solid #dfdfdf; } th { background: #f1f1f1; } td { } } .container { // width: @container !important; height: 100%; clear: both; overflow: hidden; position: relative; } @media (max-width: 767px) { // .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { // margin-right: 0px !important; // margin-left: 0px !important; // } .section { // margin-right: -20px; // margin-left: -20px; } } @media (max-width: 979px){ .navbar-fixed-top { margin-bottom: 0; } } #header { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; // overflow: hidden; // height: 187px; position: absolute; top: 0; left: 0; z-index: 101; background: #fff url('@{url}header_line.png') top repeat-x; &.main { // height: 100px; } // .logo { // width: 190px; // padding: 25px 0 0 0; // float: left; // } .logo { width: 160px; padding: 7px 0 0 0; float: left; } .sub_img { position: absolute; top: 118px; left: 0; display: none; } .top_menu { position: absolute; top: 8px; right: 40px; text-align: right; z-index: 102; li { display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ } li.last a { border: 0 none; } a { padding: 0 8px; border-right: 1px solid #ececec; color: #595959 !important; font-size: .85em; } } .gnb { float: right; // width: 790px; min-height: 95px; padding: 0; margin: 0; position: relative; &>li { text-align: center; margin-top: 10px; width: 140px; // height: 260px; list-style: none; float: left; position: relative; &>a { padding: 35px 0 25px 0; display: block; width: 100%; height: 100%; font-size: 16px; font-weight: 700; color: #4d4d4d; text-decoration: none !important; } &:hover, &.active { &>a { color: #ea4c43; } } } .gnb_sub { min-height: 150px; padding: 20px 0 15px 0; margin: 0; display: none; text-align: center; li { list-style: none; margin: 5px 0; a { font-weight: 300; font-size: 12px; color: #929292; text-decoration: none !important; } a:hover { color: #ea4c43; } } } } } .mobile_main_bottom { margin-top: 10px; text-align: center; } #mobile_header { background-color: #fff; /*height: 300px;*/ //height: 310px; // background: #d61f26; .logo { max-height: 120px; // padding-left: 50px; margin-top: 10px; margin-bottom: 7px; } a#cd-menu-trigger { //background-color: #fff; // background-color: #d61f26; height: 46px !important; } #cd-menu-trigger .cd-menu-icon { background-color: #F4A015; // background-color: #fff; } #cd-menu-trigger.is-clicked .cd-menu-icon { background-color: #fff; // background-color: #d61f26; } #cd-menu-trigger.is-clicked .cd-menu-icon::before, #cd-menu-trigger.is-clicked .cd-menu-icon::after { background-color: #F4A015; // background-color: #fff; } } #header img { max-height: 100%; } .mobile_logo2 { text-align: center; padding: 10px 0 0 0; height: 40px; background: #231f20; border-bottom: 2px solid #fbe108; img { max-height: 30px; } } .mobile_logo3 { overflow: hidden; width: 100%; text-align: center; padding: 5px 0; background: #7DA1D5; height: 40px; ul { margin: 0; padding: 9px 0 0 0; width: 150%; overflow: hidden; height: 100%; li { float:left; display:block; height: 40px; // width: 90px; margin: 0; color: #fff; font-weight: bold; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8); font-size: 24px; img { padding: 0 10px; height: 25px; } } } } .cd-main-content { background: #fff !important; } .body_wrap { position: relative; } .btn_top { display: none; position: fixed; bottom: 10px; right: 10px; z-index: 999999; &.active { display: block; } } #bodyarea { background: #fff; clear: both; margin: 0 auto; min-height: 100%; overflow: hidden; &.sub { padding-top: 95px; .page.container { background: #fff url('@{url}/sub_container_bg.png') left top repeat-y; } } &.main { padding: 0 !important; } } .sub_visual { color: #fff; height: 264px; overflow: hidden; .container { margin-top: 10px; // margin-top: 20px; } } .side { float: left; width: 210px; h2 { // text-align: center; margin: 47px 0 15px 15px; height: 53px; // line-height: 53px; } .lnb { padding: 0; margin: 0; border-bottom: 1px solid #DFDFDF; li { border-top: 1px solid #DFDFDF; // border-left: 1px solid #DFDFDF; padding: 10px 0 10px 15px; background: url('@{url}/lnb_bg.png') right top no-repeat; a { font-size: 1.1em; color: #474747; text-decoration: none !important; } &.active, &:hover { background-position-y: -41px; // background: @main-red !important; a { color: @main-red; } } // &:hover { // background: #ececec; // } } } } .sub_top { overflow: hidden; margin-bottom: 40px !important; // border-bottom: 1px solid #eee; border-bottom: 2px solid @main-red; line-height: 1.6; h3 { font-size: 2.1em; line-height: 1.2; margin: 20px 0; } .visual { text-align: center; } } .content { padding: 10px 35px; padding-bottom: 60px; // clear: both; // float: left; border-left: 1px solid #DFDFDF; border-right: 1px solid #DFDFDF; min-height: 400px; overflow: hidden; h1 { margin: 15px 0 30px 0; font-size: 2.6em; } } #footer { clear: both; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #d51113; color: #fff; ul, li { padding: 0; margin: 0; } .partner_link { width: 180px; font-size: 12px; padding: 2px 6px !important; height: 26px; line-height: 26px; } .footer_gnb { overflow: hidden; padding: 40px 0 30px 0; &>li { margin-bottom: 30px; padding-left: 40px; float: left; width: 11%; a { color: #fff; font-weight: 700; } .sub { padding-top: 10px; li { margin: 7px 0; a { line-height: 1; font-weight: 400; } } } } } .copyright { background: #202020; color: #595959; // margin: 0; padding: 24px 10px; text-align: center; line-height: 1.6; font-size: 0.9em; a { color: #595959 !important; } .impact { color: @main-red !important; } } } .white_btn { @bg: #fff; @on: #000; margin: 5px 0; display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ border: 1px solid @bg; padding: 5px 10px; color: @bg; text-decoration: none !important; &:hover { background: @bg; color: @on; } } .yellow_btn { @bg: #000; @on: #000; margin: 5px 0; display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ border: 1px solid @bg; padding: 5px 10px; color: @bg; text-decoration: none !important; &:hover { background: @bg; color: #fff; } } .red_btn { @bg: #fff; @on: @main-red; margin: 5px 0; display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ border: 1px solid @on; padding: 5px 10px; color: @on; background: @bg; text-decoration: none !important; &:hover { background: @on; color: @bg; } } // main #brand { .animate { position: relative; height: 580px; .div_2 { width: 50%; height: 100%; float: left; overflow: hidden; } .tire div { height: 100%; margin-right: 40px; background: url('@{url}/main_tire1.png') 100% 69% no-repeat; } .slide_brand { margin-bottom: 100px; img { max-width: 1000px; display: none; } @left_margin: 50px; .main_brand1 { padding-left: @left_margin*0; } .main_brand2 { padding-left: @left_margin*1; } .main_brand3 { padding-left: @left_margin*2; } /*.main_brand4 { padding-left: @left_margin*3; }*/ .main_brand4 { padding-left: @left_margin*1; } .main_brand5 { padding-left: @left_margin*2; } .main_brand6 { padding-left: @left_margin*1; } .main_brand7 { padding-left: @left_margin*0; } } } .small { font-size: 2em; color: #a58a1b; margin: 0 0 10px 0; } .title { font-size: 2.5em; margin: 0 0 40px 0; } } #card { text-align: left; img { visibility: hidden; margin-bottom: 10px; } p { color: #fff; text-align: left; } p.title { font-size: 3em; font-weight: 700; margin-bottom: 30px; } p.desc { font-size: 1.5em; margin-bottom: 30px; } p.desc_small { margin-bottom: 60px; } } #event { text-align: left; .desc { color: #fff; font-size: 1.8em; padding: 7px 0 10px 0; display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ } .title { font-size: 3em; font-weight: 700; margin-bottom: 30px; a { color: #fff !important; text-decoration: none !important; } } } #insure { // background: #fff url(/resources/img/site/insurance_tire.png) center bottom repeat-x; // background-size: cover; // padding-bottom: 80px !important; // padding-bottom: 290px; p { text-align: center; } p.title { font-size: 3em; margin-bottom: 40px; } p.desc { color: #747474; margin-bottom: 20px; line-height: 1.6; } .red_btn { margin-bottom: 60px; } .bg { position: absolute; bottom: 0; z-index: -1; } .fp-tableCell { vertical-align: bottom; } .inner { background: url(/resources/img/site/insurance_tire.png) no-repeat bottom center; padding-bottom: 250px !important; } } .thumb_item { max-width: 374px; margin: 10px auto; border: 1px solid #ececec; // margin-bottom: 20px; .info { background: #fff; padding: 10px 20px; } p { text-align: left; } img { border: 0 !important; padding: 0 !important; margin: 0 !important; } .heading_text { padding: 30px 0; font-size: 1.2em; color: #000; .thumb_title { height: 1em; .text_cut; a { color: #000 !important; } } .thumb_date { } } .content_text { height: 3.3em; margin-bottom: 40px; overflow: hidden; color: #a2a2a2; } } #kbo_news { .top_border { border-top: 2px solid #fff; color: #fff; font-size: 1.5em; padding: 7px 0 10px 0; display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ } .title { font-size: 3em; color: #fff; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); margin-bottom: 30px; } .info { padding-bottom: 30px !important; } } .mini_ul { margin-left: 16px; &>li { color: @main-red; list-style: disc; } ul { margin-left: 16px; &>li { color: #999; list-style: circle; .sub { margin-left: 55px; } } } } ul.default { margin-left: 16px; &>li { color: @main-red; list-style: disc; span { color: @text-color; } } } // COMPANY // .history_list { // border-top: 2px solid @main-red; border-top: 1px solid #e5e5e5; .history_item { border-bottom: 1px solid #e5e5e5; td { padding: 30px 10px; } li { list-style: disc; } .month { display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ padding-right: 10px; .bold; } } } // TIRE // .mytire_select_area { .step_title { margin-top: 20px; .red_title { font-weight: 700; color: @main-red; padding-right: 10px; } } } .result_tire { margin: 20px 0; } .result_list { .item { .wrap { border: 2px solid #D1D1D1; img { display: block; margin: 0 auto; } p { margin: 0; background: #333; text-align: center; height: 2em; line-height: 2; // padding: 10px 0 30px 0; color: #fff; .text-cut; } } } } // my tire .mytire_quick, .mytire_quick_sub { text-align: center; margin: 0; padding: 0; li.clearfix { width: 0; height: 0; display: block; } li { display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ width: 135px; height: 51px; overflow: hidden; line-height: 45px; margin-bottom: 5px; background: url('@{url}/mytire_brand.png') no-repeat; color: #fff; cursor: pointer; text-align: center; &.model { color: #000; background: url('@{url}/mytire_model.png') no-repeat; } } } .mytire_quick_sub { display: none; } @media (max-width: 767px){ .mytire_quick li, .mytire_quick_sub li { width: 136px; height: 136px; line-height: 128px; background: url('@{url}/mobile_mytire_brand.png') no-repeat; &.model { color: #000; background: url('@{url}/mobile_mytire_model.png') no-repeat; } } } // mobile store .store_wrap { position: relative; } .store_all_map { position: absolute; width: 304px; height: 400px; // ECECEC background: #000 url('@{url}store_all_map.png') center top; .cnt_field { position: absolute; width: 35px; height: 16px; line-height: 16px; text-align: center; font-size: 12px; a { color: #000 !important; &:hover { font-weight: bold; color: @main-red !important; } } } } .store_map { margin-left: 304px; } .mobile_map_selector { text-align: center; margin: 0; li { background-size: cover !important; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ background: url("@{url}/mobile_tire_bg.png") no-repeat; width: 108px; height: 108px; margin: 10px; padding-top: 50px; line-height: 1.2; span { font-size: 1.1em; font-weight: 700; color: #000; } &.myloc, &.myloc_style { display: block; margin: 0 auto; width: 170px; height: 170px; padding-top: 60px; background: url("@{url}/mobile_tire_bg.png") no-repeat; span { font-size: 1.3em; // color: #000; } } } &.sigun { display: none; li { padding-top: 65px; background: url("@{url}/mobile_tire_bg.png") no-repeat; span { color: #000; } } } li.dosi_bg { padding-top: 40px; background: url("@{url}/mobile_tire_bg.png") no-repeat; span { color: #fff; } } } .mobile_map_selector.center { li { background: url("@{url}/map_center_dosi.png") no-repeat; width: 75px; height: 51px; margin: 5px; padding-top: 8px; span { font-size: 1em; color: #fff; } &.myloc, &.myloc_style { display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ padding-top: 25px; background: url("@{url}/map_center_sigun.png?v=1") no-repeat; span { color: #000; } } } &.sigun.center { display: none; li { padding-top: 25px; background: url("@{url}/map_center_sigun.png?v=1") no-repeat; span { color: #000; } } } li.dosi_bg { padding-top: 8px !important; background: url("@{url}/map_center_dosi.png") no-repeat !important; span { color: #fff !important; } } } // STORE // #map { width: 100%; height: 400px; } .marketList_wrap { margin-top: 0px; height: 200px; overflow-y: auto; border-top: 2px solid #ececec; border-bottom: 2px solid #ececec; } #markerlist { th { background: #EDEDED; } td.name { min-width: 70px; } td.tel { min-width: 70px; } td.tel { text-align: center; } a { color: #333; } } // .mobile-call-sign { color: #4D8F00; font-size: 2.5em; // background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%); // -webkit-background-clip: text; // -webkit-text-fill-color: transparent; } .marketList_wrap.mobile { height: auto !important; border: 0 none !important; // border: 5px #eee solid !important; #markerlist { tr { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 40%, rgba(225,225,225,1) 41%, rgba(246,246,246,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(241,241,241,1)), color-stop(41%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 40%,rgba(225,225,225,1) 41%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 40%,rgba(225,225,225,1) 41%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 40%,rgba(225,225,225,1) 41%,rgba(246,246,246,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 40%,rgba(225,225,225,1) 41%,rgba(246,246,246,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */ border: 1px solid #ececec; } tr.region_div_item { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 40%, rgba(225,225,225,1) 41%, rgba(246,246,246,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(241,241,241,1)), color-stop(41%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 40%,rgba(225,225,225,1) 41%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 40%,rgba(225,225,225,1) 41%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 40%,rgba(225,225,225,1) 41%,rgba(246,246,246,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 40%,rgba(225,225,225,1) 41%,rgba(246,246,246,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */ border: 1px solid #ececec; } td { vertical-align: middle; // padding: 15px 8px !important; } td.tel { text-align: right !important; } // td.name span { // font-size: 0.8em; // } } } // 하위의 모바일용 (반응형) div를 위한 코드 td.name { display: block; } .mobile_list_phone { font-size: 0.9em !important; overflow: hidden; .one_row { clear: both; overflow: hidden; position: relative; } .title { .titleText { display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; border: 0px solid #000000; padding: 4px 8px 2px 8px; background: #F3B412; font-weight: bold; font-size: 1.2em; } margin-right: 80px; a { display: block; } } .mobile_tel { font-size: 1.1em; } .distance { width: 80px; text-align: right; position: absolute; top: 0; right: 0; } .mobile-km { margin-top: 20px; font-size: 1.2em; color: @main-red !important; } .left_btn { float: left; width: 32%; margin-right: 1%; } .center_btn { float: left; width: 32%; margin-right: 1%; } .right_btn { float: left; width: 34%; } .my_warning { text-shadow: none !important; color: #fff !important; background: rgb(181,58,48); /* Old browsers */ background: -moz-linear-gradient(top, rgba(181,58,48,1) 0%, rgba(116,20,6,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(181,58,48,1) 0%,rgba(116,20,6,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(181,58,48,1) 0%,rgba(116,20,6,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b53a30', endColorstr='#741406',GradientType=0 ); /* IE6-9 */ } .my_success { text-shadow: none !important; color: #fff !important; background: rgb(135,168,53); /* Old browsers */ background: -moz-linear-gradient(top, rgba(135,168,53,1) 0%, rgba(85,128,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(135,168,53,1) 0%,rgba(85,128,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(135,168,53,1) 0%,rgba(85,128,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87a835', endColorstr='#558000',GradientType=0 ); /* IE6-9 */ } .my_blue { text-shadow: none !important; color: #fff !important; background: rgb(61,121,192); /* Old browsers */ background: -moz-linear-gradient(top, rgba(61,121,192,1) 0%, rgba(22,60,113,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(61,121,192,1) 0%,rgba(22,60,113,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(61,121,192,1) 0%,rgba(22,60,113,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d79c0', endColorstr='#163c71',GradientType=0 ); /* IE6-9 */ } } // .title { // border-bottom: 1px solid #e0ecff; // overflow: hidden; // width: 256px; // cursor: pointer; // padding: 2px 0; // display: block; // color: #000; // text-decoration: none; // } // .title:visited { // color: #000; // } // .title:hover { // background: #e0ecff; // } .mapinfo { width: 230px; } .mapinfo img { border: 0; } .mapinfo-body { width: 100%; height: 77px; /*line-height: 200px;*/ margin: 2px 0; text-align: left; overflow: hidden; } .mapinfo-img { height: 220px; width: 200px; } @media (max-width: 480px){ #markerlist .desc { display: none; } } // main media @media (max-width: 767px){ #footer_wrap { background: #202020 !important; } #brand .animate { display: none !important; } #brand .tire { display: none !important; } #brand .slide_brand { width: 100% !important; div { text-align: center !important; } img { padding: 0 !important; max-width: 60% !important; } } #card, #insure { p.title { margin-bottom: 20px; } p.desc, p.desc_small { display: none; } .red_btn { margin-bottom: 0; } } #event { text-align: center; p.title { font-size: 1.5em; // margin-bottom: 10px; } .white_btn { // display: none; } } #kbo_news { .title { text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); margin-bottom: 10px; } } #card { text-align: center; p { text-align: center; } } } // Respon Common // .depth3 { // margin-top: 10px; margin-top: -40px; margin-bottom: 40px; padding: 0; &.tab_by_6 { li { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; @count: 6; width: ( 100% / @count ) ; } } &.tab_by_5 { li { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; @count: 5; width: ( 100% / @count ) ; } } &.tab_by_4 { li { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; @count: 4; width: ( 100% / @count ) ; } } &.tab_by_3 { li { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; @count: 3; width: ( 100% / @count ) ; } } &.tab_by_2 { li { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; @count: 2; width: ( 100% / @count ) ; } } li { .text-cut; @height: 35px; margin-bottom: 5px; height: @height; // border-top: 2px solid @main-red; &.first { &>a { border-left: 1px solid #e4e4e4; } } &.last { // padding-right: 0 !important; } a { border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; display: block; height: @height; line-height: @height; text-align: center; font-size: 0.9em; margin: 0; padding: 0 !important; // font-weight: bold; color: #8F8F8F; border-radius: 0; background: #ededed; } &:hover { a { // border-bottom: #fff 1px solid !important; // color: @main-red !important; background: #f9f9f9 !important; } } &.active { a { border-bottom: #fff 1px solid !important; color: @main-red !important; background: #fff !important; } } } } .div_by_5 { // 한줄용 - 지도 서비스안내 text-align: center; vertical-align: top; .item { vertical-align: top; width: 18%; display: inline-block; min-width: 175px; } p { padding: 0 10px; text-align: left; } ul { // padding: 0 10px; li { list-style: circle; text-align: left; } } } .div_by_4 { clear: both; margin-left: -20px; text-align: center; .item { // background: #ccc; margin: 0 0 20px 20px; width: 202px; text-align: center; float: left; } } .mobile-full-width { margin: 0 -20px; } .only-full { display: block; } .only-no-full { display: none; } @media (max-width: 1199px){ .only-full { display: none; } .only-no-full { display: block; } .content { /*padding-top: 86px;*/ padding-top: 38px; } .visual_video { display: none; } .banner_store { display: none; } .div_by_4 { margin-left: -2.5%; .item { width: 22.5%; margin: 0 0 20px 2.5%; } } } @media (max-width: 767px){ .div_by_4 { margin-left: -2.5%; .item { width: 47.5%; margin: 0 0 20px 2.5%; } } } @media (max-width: 480px){ .div_by_4 { margin: 0; .item { clear: both; width: 100%; margin: 0 0 20px 0; } } } .step_process { margin: 20px 0 40px 0; overflow: hidden; li { float: left; width: 25%; text-align: center; } } .personal_div { pre { height: 200px; overflow-y: scroll; } } // 메인 추가 /* Style for our header texts * --------------------------------------- */ .fadein { color: #fff; padding:0; margin: 0; margin-left: 140px; text-align: left; visibility: hidden; } /* Centered texts in each section * --------------------------------------- */ .section { text-align:center; } /* Backgrounds will cover all the section * --------------------------------------- */ .section, #banner .slide{ background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .section .inner { padding-top: 60px; padding-bottom: 60px; } .section .contain { width: 80% !important; margin: 0 auto !important; } .slide { // display: table; text-align: left; } .slide .inner { // width: 100%; padding-top: 0; // vertical-align: middle; /*display: table-cell;*/ padding-bottom: 40px; } /* Defining each section background and styles * --------------------------------------- */ #brand{ background: #fcca00 url(/resources/img/site/bg_map.png) 50% 50% no-repeat; padding: 6% 0 0 0; } #event{ background: #d40f12; padding: 6% 0 0 0; p { width: 100%; } } #card { background: #414141 url(/resources/img/site/main_card_bg.png) repeat-x; } #kbo_news { background-image: url(/resources/img/site/main_kbo_bg.jpg); background-position: center center; } #insure { /* background: #fff url(/resources/img/site/insurance_tire.png) center bottom repeat-x; background-size: cover; padding-bottom: 290px;*/ } #video_section { background: 0 none; } #footer_wrap { background: #202020 url('@{url}/main_footer_bg.png') left 50% repeat-x; } /*Adding background for the slides * --------------------------------------- */ #slide1{ background-color: #000; background-position: center center; background-image: url(/resources/img/site/visual01.png); /* background-image: url(/resources/img/site/visual01.png); background-position: 70% 100%;*/ /*padding: 8% 0 0 0;*/ /*padding: 6% 0 0 0;*/ } #slide2{ p { // float: right; color: #000; margin-left: 0 !important; margin-right: 140px; text-align: right; } background-position: center center; background-image: url(/resources/img/site/visual02.png); /*padding: 6% 0 0 0;*/ // background-attachment: fixed; } #slide3{ background-position: center center; background-image: url(/resources/img/site/visual03.png); /*padding: 6% 0 0 0;*/ } #slide4{ background-position: center center; background-image: url(/resources/img/site/visual04.png); /*padding: 6% 0 0 0;*/ } #slide4 p.title { .main_red; } #slide4 p.desc { color: #000; } #slide4 .banner_kbo { line-height: 1; max-width: 80px; } .div_2 { overflow: hidden; .item { width: 50%; float: left; &.text { padding-top: 52px; p { margin-left: 110px !important; } } } } .visual_video { background: url('@{url}/visual_video_bg.png') 0 0 no-repeat; // position: absolute; // top: 50%; // margin-top: -174px; // right: 100px; width: 482px; height: 298px; padding: 11px 0 0 11px; } @media (max-width: 1199px) { .div_2 { .item { width: 100%; float: none; } .visual_video { display: none; } } } #slide4 .desc { /*background: #474747 !important;*/ } #fullpage .section { padding-top: 95px; } #fullpage .fadein { /*display: none;*/ } #fullpage #banner .slide p.title { font-weight: 700; font-size: 5em; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); line-height: 1; margin-bottom: 20px; } #fullpage #banner .slide p.desc { font-weight: 400; font-size: 2em; } .quick_btns { position: absolute; z-index: 9999; left: 5%; width: 90%; bottom: 40px; text-align: center; height: auto; } .quick_btns a { /*padding: 0 17px;*/ display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ width: 14%; max-width: 200px; text-align: center; } #myVideo{ position: absolute; right: 0; bottom: 0; top:0; right:0; width: 100%; height: 100%; background-size: 100% 100%; background-color: black; /* in case the video doesn't fit the whole page*/ background-image: /* our video */; background-position: center center; background-size: contain; object-fit: cover; /*cover video background */ z-index:3; } /* Layer with position absolute in order to have it over the video * --------------------------------------- */ #video_section .layer{ position: absolute; z-index: 4; width: 100%; left: 0; top: 43%; } /*solves problem with overflowing video in Mac with Chrome */ #video_section{ overflow: hidden; } @media (max-width: 767px) { .section { /*margin: 0 -20px;*/ } #fullpage #banner .slide p.title { margin: 0 !important; font-size: 3em; text-align: center; } #fullpage .fp-controlArrow { display: none !important; } .quick_btns img { max-width: 78px; } .quick_btns a { width: auto; // padding: 0 5px; } } // layout #mobile_header { display: none; } @media (min-width: 1200px) { #header { display: block; } #mobile_header { display: none; } } @media (max-width: 1199px) { #bodyarea.sub { padding-top: 80px; } #header, .side { display: none; } .sub_visual { display: none; } .page.container { background: #fff none !important; } .content { padding-left: 0px; padding-right: 0px; border: 0; } .content_m { padding-left: 20px; padding-right: 20px; border: 0; } #mobile_header { display: block; } .store_all_map { display: none; } .store_map { margin-left: 0 !important; } } @media (max-width: 767px){ .bbs_view_detail::after { content: "\A"; } .footer_gnb { display: none; } .copyright { // margin: 0 -20px; } .popup.layer { /*display: none;*/ } } // mobile .mobile_top_btn { clear: both; overflow: hidden; text-align: center; margin-bottom: 20px; } .mobile_top_btn > a { background-size: cover !important; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: top; zoom: 1; width: 135px; height: 135px; padding-top: 50px; background: url("/resources/img/site//mobile_tire_bg.png") no-repeat; margin: 10px; line-height: 1.2; } .mobile_top_btn > a > span { font-size: 1.1em; font-weight: 700; color: #000; } .mobile_chapter { margin-bottom: 40px; .more { margin-top: 5px; margin-bottom: 10px; text-align: right; a { padding-right: 2px; color: @main-red !important; } } .mobile_company { a { margin-bottom: 20px; border: 1px solid #bdbcbd; display: block; img { margin: 0 !important; } } } } .mobile_title { color: #000; text-align: left; margin-bottom: 10px; font-weight: bold; font-size: 22px; } .mobile_home_list { margin: 0; // &.event li { // padding-left: 115px; // padding-right: 0; // img { // left: 10px; // right: 0; // } // } li { border: 1px solid #bdbcbd; background: #fff url('@{url}mobile_company_bg.png') repeat-x; position: relative; padding-left: 10px; padding-right: 65px; height: 120px; margin: 25px 70px 25px 0; .title { a { color: #000 !important; } font-weight: bold; height: 2.6em; font-size: 1.35em; overflow: hidden; padding: 20px 0 0 10px; margin: 0; line-height: 1.3; word-break: normal !important; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .desc { font-size: 0.8em; height: 65px; margin-top: 5px; overflow: hidden; } .img_wrap { position: absolute; top: 19px; right: -53px; width: 85px; height: 85px; z-index: 1; } img { position: absolute; top: -2px; right: -71px; z-index: 2; height: 125px; } } }