@charset "UTF-8";
/* s1_company.css */
/* 공통 // headBox 해더박스 ================== */
#headBox { position: fixed; z-index: 500; top: 0; left: 0; width: 100%; height: 80px; background-color: #f00; }

#headBox:after, #headBox::after { display: none; }

#headBox.act:after, #headBox.act::after { content: " "; display: block; position: absolute; top: 80px; left: 0; z-index: 1; width: 100vw; height: 0; border-bottom: 1px solid #fff; }

.head_area { width: 100%; height: 100%; min-width: 250px; margin: auto; padding: 20px 30px; box-sizing: border-box; background-color: #f00; }

h1 { float: left; width: 130px; height: 40px; }

h1 > a { display: block; width: 100%; height: 100%; background: url("../img/mobile/logo_mobile.gif") no-repeat 50% 50%/cover; }

h1 > a:hover, h1 > a:focus { transform: scale(1.1); outline: none; }

.gnb_cp { float: right; width: 45px; height: 40px; }

.search_open, .search_close { float: right; width: 45px; height: 40px; font-size: 2.5rem; background-color: transparent; text-align: center; line-height: 40px; color: #fff; }

.search_close { display: none; }

.open_btn { display: block; position: relative; width: 100%; height: 100%; }

.open_btn button { width: 100%; height: 100%; background-color: transparent; }

.navList { position: absolute; top: 0; left: 75px; right: 0; margin: auto; background-color: #f00; width: 700px; height: auto; }

.navList:before, .navList::before { content: " "; display: block; position: absolute; z-index: -1; top: 0; left: 50%; margin-left: -60vw; width: 120vw; height: 100%; background-color: inherit; }

.navList:after, .navList::after { content: " "; display: block; width: 0; height: 0; clear: both; }

.navList > li { float: left; width: 23%; height: auto; margin: 0 5px; }

.navList > li > dl { width: auto; height: auto; }

.navList > li > dl > dt { width: auto; height: auto; }

.navList > li > dl > dt.act a { color: #ff0; }

.navList > li > dl > dt > a { display: block; width: 100%; height: 80px; line-height: 80px; text-align: center; font-size: 1.4rem; font-weight: bold; color: #fff; }

.navList > li > dl > dt > a:hover, .navList > li > dl > dt > a:focus { color: #ff0; outline: none; }

.navList > li > dl > dd { display: none; width: auto; margin: 20px 0; outline: none; }

.navList > li > dl > dd > a { display: block; width: auto; height: 40px; text-indent: 45px; color: #fff; margin-top: 5px; line-height: 40px; }

.navList > li > dl > dd > a:hover, .navList > li > dl > dd > a:focus { color: #ff0; outline: none; }

#headBox button:hover { background-color: transparent; transform: scale(1.1); }

#headBox button:focus { outline: none; transform: scale(1.1); }

.search_box { display: none; position: absolute; top: 80px; left: 0; right: 0; width: 100%; height: 80px; margin: auto; padding: 20px; box-sizing: border-box; background-color: white; }

.search_box fieldset { width: 60%; height: 40px; margin: auto; padding: 2px; /* box-sizing:border-box; */ background-color: #fff; }

.search_box #siteName { float: left; width: 15%; height: 40px; margin-right: 2%; text-indent: 8px; font-size: 1.5rem; }

.search_box #searchBar { float: left; width: 75%; height: 40px; font-size: 1.5rem; }

.search_box .search_icon { float: right; width: 5%; height: 40px; background-color: transparent; color: #f00; font-size: 2.5rem; }

.gnb_cp .burgur { position: absolute; top: 50%; left: 0; width: 100%; height: 8px; transform: translate(0, -50%); border-radius: 4px; background-color: white; }

.gnb_cp .burgur:before, .gnb_cp .burgur::before, .gnb_cp .burgur:after, .gnb_cp .burgur::after { content: " "; position: absolute; left: 0; width: 100%; height: 8px; border-radius: 4px; background-color: white; transition: all 800ms ease; }

.gnb_cp .burgur:before, .gnb_cp .burgur::before { top: -16px; }

.gnb_cp .burgur:after, .gnb_cp .burgur::after { top: 16px; }

.gnb_cp .open_btn > .act, .gnb_cp .close_btn > .act { background-color: rgba(255, 255, 255, 0); }

.gnb_cp .open_btn > .act:before, .gnb_cp .open_btn > .act::before, .gnb_cp .close_btn > .act:before, .gnb_cp .close_btn > .act::before { top: 0; transform: rotate(45deg); }

.gnb_cp .open_btn > .act:after, .gnb_cp .open_btn > .act::after, .gnb_cp .close_btn > .act:after, .gnb_cp .close_btn > .act::after { top: 0; transform: rotate(-45deg); }

.close_btn { position: relative; width: 50px; height: 50px; float: right; }

.close_btn button { width: 100%; height: 100%; background-color: transparent; }

.close_btn:hover { transform: scale(1.1); }

.all_gnb { display: none; position: absolute; top: 0; right: 0; margin: auto; padding: 20px; box-sizing: border-box; width: 60%; height: 100vh; background-color: rgba(51, 51, 51, 0.9); }

.nav_site { width: 150px; height: 100%; margin: auto; padding: 10px 10vw; }

.nav_site .btn_nav { width: 100%; height: 100%; margin-top: 50px; overflow: auto; }

.nav_site .btn_nav li { width: 100%; }

.nav_site .btn_nav li dl { width: 100%; }

.nav_site .btn_nav li dl dt { width: 100%; font-size: 1.5rem; margin-top: 10px; border-bottom: 2px solid #fff; }

.nav_site .btn_nav li dl dt a { display: block; color: #fff; }

.nav_site .btn_nav li dl dd { width: 100%; }

.nav_site .btn_nav li dl dd a { display: block; width: 100%; height: 100%; color: #fff; font-size: 1rem; text-indent: 10px; }

.btn_nav a:hover { outline: none; }

.btn_nav a:focus { color: #ff0; }

/* 모바일 480px~767px (280) h:640 =============== */
/* media screen and (max-width:767px) */
@media screen and (max-width: 767px) { #wrap { min-width: 150px; }
  .box_text { font-size: 16px; font-size: 1rem; }
  .navList { display: none; }
  .search_open { display: none; }
  .more_btn { margin-top: 50px; }
  .cp { display: block; } }

/* // media screen 모바일 */
/* 패드 768px~1279px  h:1024 =============== */
/* media screen and (min-width: 768px) and (max-width:1279px) */
@media screen and (min-width: 768px) and (max-width: 1279px) { .navList { display: none; }
  .search_open { display: none; } }

/* PC 1280px~1919px (1024) h:800=============== */
/* media screen and (min-width: 1280px) */
@media screen and (min-width: 1280px) and (max-width: 1919px) { .gnb_cp { display: none; }
  .head_area { max-width: 1024px; } }

/* TV 1920px~ =============== */
/* media screen and (min-width: 1920px) h:900 */
@media screen and (min-width: 1920px) { .head_area { max-width: 1280px; }
  .gnb_cp { display: none; } }

/* 공통 // footBox 풋박스 ================== */
#contentBox { width: 100%; height: auto; min-height: 500px; }

#footBox { position: relative; width: 100%; height: auto; padding: 20px 0; background-color: #f00; }

#footBox:before { content: " "; position: absolute; left: 0; top: -33px; width: 100%; height: 42px; background: url("../img/background/footbox_bg.png") repeat-x 50% 50%/auto 61%; }

.foot_area { width: 100%; max-width: 1000px; height: auto; margin: auto; }

.link_area { width: auto; height: auto; padding-top: 10px; box-sizing: border-box; text-align: center; }

.link_area > li { display: inline-block; position: relative; margin-right: 20px; }

.link_area > li:last-child { margin-right: 0; }

.link_area > li:before, .link_area > li::before { content: " "; position: absolute; top: 0; bottom: 0; left: -12px; margin: auto; width: 0; height: 70%; border-right: 2px solid #fff; }

.link_area > li:first-child:before, .link_area > li:first-child::before { display: none; }

.link_area > li > a { display: block; width: 100%; height: 100%; color: #fff; }

.foot_ls { width: 100%; height: auto; margin-top: 20px; }

.sns_link { width: auto; height: auto; margin: auto; text-align: center; }

.sns_link > li { display: inline-block; width: auto; height: auto; margin-right: 20px; padding: 2px 5px; }

.sns_link > li:nth-child(1) > a { background-color: #4072b8; background-image: url("../img/sns_logo/fb_logo.png"); background-size: 105% auto; }

.sns_link > li:nth-child(2) > a { background-image: url("../img/sns_logo/insta_logo.png"); }

.sns_link > li:nth-child(3) > a { background-image: url("../img/sns_logo/twitter_logo.png"); }

.sns_link > li:nth-child(4) > a { background-image: url("../img/sns_logo/youtube_logo.png"); }

.sns_link > li > a { display: block; overflow: hidden; width: 50px; height: 50px; background-color: #fff; border-radius: 100%; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }

address { width: 100%; max-width: 1200px; height: auto; margin: auto; margin-top: 10px; }

address > p { width: 100%; height: auto; text-align: center; color: #fff; }

address > p br { display: none; }

address > p a { color: inherit; }

address > p:nth-of-type(3) { margin-top: 20px; }

#footBox a:hover { outline: none; transform: scale(1.1); }

#footBox a:focus { outline: none; color: #ff0; }

.sns_link a:focus { border: 3px solid #ff0; box-sizing: border-box; }

/* 모바일 480px~767px (280) h:640 =============== */
/* media screen and (max-width:767px) */
@media screen and (max-width: 767px) { address > p > br { display: block; } }

/* // media screen 모바일 */
/* 패드 768px~1279px  h:1024 =============== */
/* media screen and (min-width: 768px) and (max-width:1279px) */
/* PC 1280px~1919px (1024) h:800=============== */
/* media screen and (min-width: 1280px) */
/* TV 1920px~ =============== */
/* media screen and (min-width: 1920px) h:900 */
@media screen and (min-width: 1920px) { .head_area { max-width: 1280px; }
  .gnb_cp { display: none; } }

#wrap { width: 100%; height: 100%; margin: auto; }

#contentBox { position: relative; padding-top: 130px; }

h2 { width: 200px; height: auto; font-size: 35px; text-align: center; margin: 20px auto; }

.bussLink { width: 100%; height: auto; margin: 15px 0 30px; text-align: center; }

.bussLink li { display: inline-block; position: relative; width: auto; height: auto; margin-right: 20px; font-size: 1.1rem; }

.bussLink li:after, .bussLink li::after { content: " "; position: absolute; right: -12px; top: 0; bottom: 0; margin: auto; width: 0; height: 60%; border-left: 2px solid #333; }

.bussLink li.action > a { color: #f00; font-weight: bold; font-size: 1.2rem; }

.bussLink li:last-child { margin-right: 0; }

.bussLink li:last-child:after, .bussLink li:last-child::after { display: none; }

.bussLink a:hover { font-weight: bold; outline: none; }

#cokeBox { display: block; width: 70%; height: 100%; min-height: 800px; margin: auto; padding-top: 30px; }

#cokeBox .coke { width: 100%; height: auto; }

#cokeBox .coke .coketext { float: left; width: 48%; height: auto; }

#cokeBox .coke .coketext h3 { width: 300px; margin-bottom: 20px; font-size: 2rem; }

#cokeBox .coke .coketext h3 strong { font-size: 4rem; line-height: 1; }

#cokeBox .coke .coketext h3 strong:after { content: " "; display: block; width: 90%; height: 30px; margin-top: -25px; background-color: rgba(255, 0, 0, 0.5); }

#cokeBox .coke .coketext p { word-break: keep-all; }

#cokeBox .coke .coketext p::first-letter { font-size: 1.5rem; font-weight: bold; }

#cokeBox .coke .cokeimg { float: right; width: 45%; height: 100%; background-color: #333; min-height: 500px; }

#cokeBox .maintext { display: block; width: 100%; height: auto; margin: 100px 0; text-align: center; font-size: 2rem; }

#cokeBox .maintext strong { font-size: 2.5rem; color: #f00; font-weight: bold; }

#cokeBox .cokesum { width: 100%; height: 100%; margin: 50px 0; padding-bottom: 50px; }

#cokeBox .cokesum li { float: left; width: 30%; height: 300px; background-color: #fe0; margin-right: 5%; margin-bottom: 50px; }

#cokeBox .cokesum li:nth-child(3n) { margin-right: 0; }

#globBox { display: none; width: 80%; height: auto; min-height: 800px; margin: auto; background-color: #efd; }

#korBox { display: none; width: 80%; height: auto; min-height: 800px; margin: auto; background-color: #ede; }

#histBox { display: none; width: 80%; height: auto; min-height: 800px; margin: auto; background-color: #eef; }

#sociBox { display: none; width: 80%; height: auto; min-height: 800px; margin: auto; }

#sociBox .social { width: 100%; height: 400px; }

#sociBox .social li { float: left; width: 30%; height: 100%; margin-right: 5%; background-color: #fed; }

#sociBox .social li:last-child { margin-right: 0; }

#sociBox .social li dl { width: 100%; height: 100px; }

#sociBox .social li dl dt { width: 200px; height: 200px; margin: auto; margin-bottom: 30px; border-radius: 100%; background-color: #fff; }

#sociBox .social li dl dd { width: 80%; height: auto; margin: auto; }

#sociBox .maintext { display: block; width: 100%; height: auto; margin: 80px 0 30px; text-align: center; font-size: 2rem; font-weight: bold; }

/* 모바일 480px~767px (280) h:640 =============== */
/* media screen and (max-width:767px) */
/* 패드 768px~1279px  h:1024 =============== */
/* media screen and (min-width: 768px) and (max-width:1279px) */
/* PC 1280px~1919px (1024) h:800=============== */
/* media screen and (min-width: 1280px) */
/* TV 1920px~ =============== */
/* media screen and (min-width: 1920px) h:900 */