.full_screen { width: 100%; position: relative; height: 100%; background: url(../images/sw/bg.png) no-repeat center center; background-size: cover; overflow-x: hidden; } .full_screen .logo2{ position: absolute; left:40px; top:40px; max-width:226px; width:50vw; } .full_screen .title{ max-width:559px; width:70vw; position: relative; left:50%; top:35%; transform: translate(-50%,-50%); } .full_screen .global_select { font-size: 0; text-align: left; width: 100%; left: 50%; top: 38%; max-width: 1280px; position: relative; transform: translate(-50%, 0); } .full_screen .global_select li{ position: relative; vertical-align: top; margin:0px; width:25%; text-align: left; display: inline-block; line-height: 28px; margin-bottom: 30px; } .full_screen .global_select li a{ display: block; vertical-align: top; padding-bottom:30px; } .full_screen .global_select li a span { font-family: "NotoSans"; font-weight: 400; color: #fff; font-size: 20px; font-weight: 100; letter-spacing: -0.03em; line-height: 28px; padding-left: 15px; vertical-align: top; } .full_screen .global_select li a span.long_text { font-size: 18px; } .full_screen .global_select li a.sub_a { margin-bottom: 8px; padding-bottom: 0; } .full_screen .global_select li a i { font-style: normal; color: #fff; display: inline-block; font-size: 11px; padding: 0px 7px; border: 1px solid; line-height: normal; border-radius: 10px; position: relative; right: -7px; top: -8px; } .full_screen .global_select li a.sub_a span { color: #fff; font-size: 13px; font-weight: 100; letter-spacing: -0.03em; line-height: 23px; padding-left: 41px; vertical-align: top; } header.view { background: #ffffff url('../images/sub/product/view/view_header.png') no-repeat top center; } header.view.active { background: #ffffff } section.top_section .canvas { width: 100%; height: 850px; text-align: center; } .logo{ position: relative; width:200px; margin-bottom:100px; } .wrap { max-width: 1920px; margin: 0 auto; /* display: table; */ /* overflow: hidden; */ } .container { max-width: 1920px; margin: 0 auto; height: 836px; /* display: table-cell; vertical-align: middle; */ position: relative; } .container .content { max-width: 1440px; padding:0px 40px; position: absolute; padding-top:120px; text-align:left; box-sizing:border-box; } .all_sw1 { background: url(../images/sub/sw/sw1.png) no-repeat center center; } h1.top_title { font-size: 62px; margin-bottom: 30px; letter-spacing: -0.02em; font-family: 'NotoSansKR', 'Montserrat'; font-weight: 300 } p.top_txt { font-size: 25px; letter-spacing: -0.025em; font-family: 'NotoSansKR', 'Montserrat'; font-weight: 200; line-height: 36px; } /* sub nav */ .sub_header.container { position: fixed; z-index: 3; width: 100%; } .sub_header.container.support { height: 57px; } .sub_header .sub_visual { height: 440px; width: 100%; overflow: hidden; } .sub_header .sub_visual .origin { width: 100%; height: 440px; background: url(../images/sub/aboutus/sub_header_bg_01.png) no-repeat center center; background-size: cover !important; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(1, 1) rotate(0.01deg); transform: scale(1, 1) rotate(0.01deg); -webkit-transition: transform 10s linear 0s; transition: transform 10s linear 0s; } .sub_header .sub_visual.active .origin { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } .sub_header .sub_visual.about .origin { -webkit-transform: scale(1.05) rotate(0.01deg); transform: scale(1.05) rotate(0.01deg); } .sub_header .sub_visual.about.active .origin { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .sub_header .sub_slog { width: 1440px; height: 440px; position: absolute; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: left; z-index: 4; padding-top: 170px; box-sizing: border-box; } .sub_header .sub_slog p:nth-of-type(1) { font-size: 20px; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.05em; margin: 0 0 32px 0; font-family: 'NotoSansKR', 'Oswald', sans-serif; } .sub_header .sub_slog p.textSplit { font-size: 38px; letter-spacing: -0.01em; line-height: 42px; font-weight: 300; font-family: 'NotoSansKR', 'Oswald', sans-serif; } .sub_header .sub_slog p.textSplit span { font-size: 38px; line-height: 42px; font-weight: 300; color: rgba(255, 255, 255, 1); opacity: 0 } .sub_header .sub_slog p.textSplit span.active { color: rgba(255, 255, 255, 1); opacity: 1 } /* Sub Nav PC */ .sub_nav { display: block; width: 100%; max-width: 1920px; margin: 0 auto; height: 57px; text-align: center; background-color: #202020; } .sub_nav .table { margin: 0 auto; text-align: center; } .sub_nav ul { font-size: 0px; text-align: center; margin: 0 auto; } .sub_nav ul::after { clear: both; content: ''; display: block; } .sub_nav ul li { background: #202020; height: 57px; padding:0px 30px; text-align: center; display: inline-block; border-right: 1px solid rgba(255, 255, 255, .2); } .sub_nav.ty02 ul li { width: 360px; } .sub_nav ul li:first-child { border-left: 1px solid rgba(255, 255, 255, .2); } .sub_nav ul li.active { background: #a00033; } .sub_nav ul li a { display: block; text-align: center; line-height: 57px; color: #fff; font-size: 17px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.075em; box-sizing: border-box; } a[name="sw1"], a[name="sw2"], a[name="sw3"], a[name="sw4"], a[name="sw5"] { position: relative; top: -80px; } .sub_nav ul li.active { background: #a00033; border-right: none; } .sub_nav a.active span { border-bottom: 1px solid #ffffff; padding-bottom: 1px; } /* Sub Nav Mobile */ .sub_nav_m { width: 100%; margin: 0 auto; display: none; } .sub_nav_m .select_wrap { width: 100%; margin-bottom: 20px; clear: both; background-color: #a00033; text-align: center; } .sub_nav_m .select_box { width: 450px; margin: 0 auto; color: #fff; background-position: 420px center; box-sizing: border-box; height: 44px; line-height: 44px; line-height: 46px; } .sub_nav_m .select_box * { height: 44px; line-height: 44px; font-family: 'NotoSansKR', 'Montserrat'; } .sub_nav_m .select_box { position: relative; height: 44px; background-image: url("../images/common/select_arrow_white.png"); background-position: 100% center; background-repeat: no-repeat; color: #fff; box-sizing: border-box; } .sub_nav_m .select_box:hover { /* border: 1px solid rgba(33,192,243,1); */ } .sub_nav_m .select_box label { color: #fff; position: absolute; font-size: 16px; line-height: 44px; top: 0px; left: 0; width: 100%; text-align: left; } .sub_nav_m .select_box select { cursor: pointer; color: #000; font-weight: 300; width: 100%; height: 44px; line-height: 44px; padding: 0 10px; opacity: 0; filter: alpha(opacity=0); } .sub_nav_m .select_box, .sub_nav_m .input_box, .sub_nav_m .btn { display: inline-block; vertical-align: top; } /* Contents inner */ .content.company { padding-bottom: 0px; width: 1440px; padding: 0 50px 80px 50px; margin: 0 auto; box-sizing: border-box; } .tc { text-align: center; margin-bottom: 70px; } .content.company .sub_title { text-align: center; font-size: 46px; color: #202020; font-weight: 400; display: inline-block; border-top: 1px solid #202020; border-bottom: 1px solid #202020; padding: 2px 0 5px 0; } .sw_contents .box p.tit { font-size: 24px; color: #cd0142; font-weight: 400; margin-bottom: 22px; } .sw_contents .box span.tit { font-size: 16px; font-weight: 300; margin-bottom: 25px; line-height: 26px; letter-spacing: 0.025em; } .sw_contents .box { margin-bottom: 50px; } .sw_contents .box:last-child { margin-bottom: 0; } .sw_contents table { table-layout: fixed; } .sw_contents { width: 100%; } .sw_contents .box span.tit2 { font-size: 16px; border-bottom: 1px solid #000000; display: inline-block; padding-bottom: 5px; margin-bottom: 10px; margin-top:20px; } .sw_contents .box ul.sw_list3 li{ font-size:15px; font-weight:300; font-family:'NotoSansKR', 'Montserrat'; letter-spacing:-0.025em; line-height:24px; } .sw_contents .box ul.sw_list3 li>img{ vertical-align:middle; margin-bottom:5px; margin-right:3px; } .sw_contents .box ul.sw_list4 li{ list-style-type: disc; margin-left:20px; } .sw_contents .box ul.sw_list4 li >ul li{ list-style-type: none; } .sw_contents .box ul li { padding-left: 15px; position: relative; font-weight: 300; line-height: 24px; margin-left:15px; } .sw_contents .box ul li::after { display: block; clear: both; position: absolute; width: 15px; height: 15px; left: 0; top: 0; font-weight: 300 } .sw_contents .box ul li:last-child{ margin-bottom:10px; } .sw_contents .box ul.ty02 li { padding-left: 0 } .sw_contents .box ul.ty02 li::after { display: none; } .sw_contents .box ul li:first-of-type::after { content: '1.'; } .sw_contents .box ul li:nth-of-type(2)::after { content: '2.'; } .sw_contents .box ul li:nth-of-type(3)::after { content: '3.'; } .sw_contents .box ul li:nth-of-type(4)::after { content: '4.'; } .sw_contents .box ul li:nth-of-type(5)::after { content: '5.'; } .sw_contents .box ul li:nth-of-type(6)::after { content: '6.'; } .sw_contents .box ul li:nth-of-type(7)::after { content: '7.'; } .sw_contents .box ul li:nth-of-type(8)::after { content: '8.'; } .sw_contents .box ul li:nth-of-type(9)::after { content: '9.'; } .sw_contents table { padding: 0; border-spacing: 0px; border: 0; border-collapse: collapse; } .sw_contents th, .sw_contents td { padding: 0px; } .sw_contents table { margin: 0 0 20px; border-collapse: collapse; box-sizing: border-box; } .sw_contents table th { background-color: #f6f6f6; padding: 15px 20px; border: solid 1px #ddd; font-size: 16px; text-align: left; vertical-align: middle; letter-spacing: 0.02em; font-weight: 300; box-sizing: border-box; font-family: 'NotoSansKR', 'Oswald', 'Noto Sans SC'; } .sw_contents table td.SubHeader { background-color: #f8f8f8; font-weight: normal; } .sw_contents table td { padding: 15px 27px; font-family: 'NotoSansKR', 'Oswald', 'Noto Sans SC'; border: solid 1px #ddd; font-size: 17px; line-height: 30px; vertical-align: middle; letter-spacing: -0.03em; font-weight: 300; box-sizing: border-box; } table caption { display: none; } .sw_contents table { width: 100%; } .sw_contents table.tb80{width:80%; margin:0 auto;} .sw_img img{width:100%;} .sw_contents .box p.tit { font-size: 24px; color: #cd0142; font-weight: 400; margin-bottom: 22px; } .sw_contents .box span.tit { font-size: 16px; font-weight: 300; margin-bottom: 25px; line-height: 26px; letter-spacing: 0.025em; } .sw_contents p.guide { font-size: 15px; line-height: 24px; letter-spacing: -0.025em; font-family: 'NotoSansKR', 'Montserrat'; font-weight: 300; color: #cd0142; margin-bottom: 10px; } .sw_contents p.guide2 { font-size: 15px; line-height: 24px; letter-spacing: -0.025em; font-family: 'NotoSansKR', 'Montserrat'; font-weight: 300; margin-bottom: 10px; margin-top:20px; } .sw_contents p.guide3 { font-size: 15px; line-height: 24px; letter-spacing: -0.025em; font-family: 'NotoSansKR', 'Montserrat'; font-weight: 300; margin-bottom: 10px; } .sw_contents p.guide2 a { font-family: inherit; color: inherit; text-decoration: underline; } .sw_contents span.underline{ border-bottom:1px solid #000; padding-bottom:1px; } @media screen and (max-width: 1280px) { .full_screen .global_select { width: 90%; margin-top: 0; } .full_screen .global_select li { width: 50%; text-align:center; } .full_screen .global_select li div { text-align:left; } } @media screen and (max-width: 820px) { .full_screen .global_select li a span.long_text { font-size: 17px; } .full_screen .global_select li { width: 300px; text-align:center; } .full_screen .global_select li a.sub_a span { font-size: 13px; } }