@import url("reset.css");

.point {color:#0934ff;}
.taR {text-align:right;}
.inner {position:relative;max-width:830px;margin:0 auto;}
.logo {background:url(../images/logo.svg) no-repeat center;background-size:contain;font-size:0;}
.headline1 {padding-top:30px;margin-bottom:70px;font-weight:200;font-size:100px;line-height:1;letter-spacing:-8px;}
.headline2 {font-size:48px;font-weight:900;line-height:1.3;letter-spacing:-3px;}
.headline2 .point {text-transform:uppercase;}
.body1 {margin-top:34px;font-weight:200;font-size:22px;line-height:1.28;letter-spacing:-1px;}
.btnBase {display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:162px;height:42px;padding:0 18px 2px;border:2px solid #0934ff;border-radius:99px;font-size:17px;font-weight:800;color:#0934ff;text-align:center;transition:all 0.2s;}
.btnBase.active, .btnBase:hover {background-color:#0934ff;color:#fff;}
.btnGroup {display:flex;margin-top:40px;}
.btnGroup .btnBase + .btnBase {margin-left:20px;}
.bgArea {background-color:#f6f6f6;}

.popupWrap {position:fixed;top:0;left:0;z-index:100;}
.popupWrap .dimm {position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);}
.popupWrap .popupBox {position:fixed;top:50%;left:50%;width:330px;min-height:188px;padding:40px 20px;border-radius:6px;background-color:#fff;transform:translate(-50%, -50%);text-align:center;}
.popupWrap .popupBox .txt {margin-top:10px;font-weight:300;font-size:18px;}
.popupWrap .popupBox .btnGroup {justify-content:center;}
.popupWrap .popupBox .btnGroup .btnBase {min-width:122px;height:36px;background-color:#0934ff;font-size:15px;font-weight:700;color:#fff;letter-spacing:0;}

.header {position:sticky;left:0;top:0;width:100%;background-color:#000;color:#fff;z-index:50;}
.header .inner {display:flex;align-items:center;max-width:1054px;height:62px;padding:16px;}
.header h1 {display:block;}
.header h1 .logo {display:block;width:114px;height:16px;}
.header nav {display:flex;align-items:center;margin-left:auto;}
.header nav ul {display:inline-flex;align-items:center;}
.header nav ul a {transition:all 0.1s;}
.header nav .pageMove li {display:inline-block;margin-right:38px;vertical-align:top;}
.header nav .pageMove li a {display:block;font-size:13px;line-height:30px;font-weight:500;}
.header nav .pageMove li a:hover {color:#0834ff;}
.header nav .socialLink li + li {margin-left:8px;}
.header nav .socialLink a {width:19px;height:19px;}
.header nav .socialLink .linkYT {background-image:url(../images/icon_yt.png);}
.header nav .socialLink .linkYT:hover {background-image:url(../images/icon_yt_on.png);}
.header nav .socialLink .linkIG {background-image:url(../images/icon_ig.png);}
.header nav .socialLink .linkIG:hover {background-image:url(../images/icon_ig_on.png);}
.header nav .socialLink .linkFB {background-image:url(../images/icon_fb.png);}
.header nav .socialLink .linkFB:hover {background-image:url(../images/icon_fb_on.png);}

.socialLink li {display:inline-block;vertical-align:top;}
.socialLink a {display:block;border-radius:50%;overflow:hidden;font-size:0;}

.section section {position:relative;padding:80px 0 100px;}
.section section.section2-2 {height:401px;padding:160px 0 0;}
.section section.section2-3 {padding:145px 0 225px;}
.section section.section2-3 b {font-weight:800;}
#pageS01 section:not(:last-child) {padding-bottom:200px;}

.imgBox {position:absolute;left:50%;width:100%;transform:translateX(-50%);background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:1;}
.imgBox.slide {bottom:0;height:100%;background-image:url(../images/img_slide.png);background-position:bottom center;z-index:-1;}
.imgBox.headphone {top:0;height:502px;background-image:url(../images/img_headphone.png);}
.imgBox.turntable {bottom:-350px;height:579px;background-image:url(../images/img_turntable.png);}

.vodArea {position:relative;background-color:#eee;}
.vodArea .vod {display:block;width:100%;margin:0 auto;}
.vodArea .logo {display:block;width:570px;height:70px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}

.processWrap {position:relative;margin-top:60px;z-index:1;}
.processWrap .headline2 {position:absolute;top:50%;left:50px;font-size:70px;line-height:1.1;transform:translateY(-50%);letter-spacing:-5px;z-index:1;}
.processWrap .circleBox {position:relative;display:inline-flex;align-items:center;justify-content:center;width:250px;height:250px;padding:30px;border-radius:50%;background-color:#fff;}
.processWrap .circleBox.active {border:5px solid #0834ff;}
.processWrap .circleBox p {font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-2px;text-align:center;}
.processWrap .circleBox::after {content:"";position:absolute;top:50%;left:100%;display:block;width:74px;height:3px;margin-left:-30px;background-color:#000;z-index:1;}
.processWrap ol {display:flex;flex-wrap:wrap;padding:0 19px;text-align:center;}
.processWrap ol li {position:relative;flex:none;width:33.33334%;padding:22px 7px;}
.processWrap ol li:nth-child(1) {order:1;}
.processWrap ol li:nth-child(2) {order:2;}
.processWrap ol li:nth-child(3) {order:3;}
.processWrap ol li:nth-child(3) .circleBox::after {width:3px;height:74px;left:50%;top:100%;margin:-12px -2px 0 0;}
.processWrap ol li:nth-child(4) {order:5;}
.processWrap ol li:nth-child(4) .circleBox::after {left:0;margin-left:-51px;}
.processWrap ol li:nth-child(5) {width:66.66666%;order:4;text-align:right;}
.processWrap ol li:nth-child(5) .circleBox::after {width:3px;height:74px;left:50%;top:100%;margin:-12px -2px 0 0;}
.processWrap ol li:nth-child(6) {order:7;}
.processWrap ol li:nth-child(7) {order:6;}
.processWrap ol li:nth-child(8) {order:8;}
.processWrap ol li:nth-child(8) .circleBox::after {content:none;}

.msgWrap {padding:140px 0 80px;text-align:center;}
.msgWrap .txt {font-size:42px;letter-spacing:-2px;line-height:1.4;}
.msgWrap .txt p {margin-bottom:30px;}
.msgWrap .txt span {display:block;font-size:34px;font-weight:900;line-height:1;}

.formWrap {margin-top:95px;}
.formWrap .title {font-size:22px;font-weight:500;letter-spacing:-0.8px;}
.formWrap .cont {padding:12px 0 0 6px;}
.formWrap .txtList {font-size:15px;color:#777;}
.formWrap .addFile {display:flex;flex-direction:column;min-height:220px;padding:12px 18px;border:1px solid #a6a6a6;}
.formWrap .addFile .textarea {height:60px;font-size:13px;}
.formWrap .addFile .textarea::placeholder {color:#777;font-weight:300;}
.formWrap .addFile .textarea2 {height:190px;font-size:13px;}
.formWrap .addFile .textarea2::placeholder {color:#777;font-weight:300;}
.formWrap .addFile .btmArea {position:relative;margin-top:auto;padding:20px 0 40px;}
.formWrap .addFile .btmArea .inpFile {position:absolute;left:0;bottom:0;}
.formWrap .addFile .item {position:relative;display:inline-flex;align-items:center;width:200px;height:26px;margin:10px 12px 0 0;background-color:#fcfcfc;box-shadow:1px 1px 4px 0 rgba(122, 122, 122, 0.2);}
.formWrap .addFile .item .name {flex:auto;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.formWrap .addFile .item::before {content:"";flex:none;display:inline-block;width:30px;height:25px;background:url(../images/iconFile.png) no-repeat center;}
.formWrap .addFile .item .btnDel {display:inline-block;flex:none;width:30px;height:25px;background:url(../images/close.svg) no-repeat center;background-size:16px;font-size:0;}
.formWrap .inpFile {position:relative;display:inline-block;}
.formWrap .inpFile input {position:absolute;width:100%;height:100%;opacity:0;font-size:0;cursor:pointer;}
.formWrap .inpFile .btn {display:block;position:relative;height:26px;padding:0 10px;font-size:12px;font-weight:500;color:#fff;background-color:#a6a6a6;border-radius:8px;transition:all 0.2s;z-index:-1;}
.formWrap .inpFile:hover .btn {background-color:#444;}
.formWrap .addTxt {font-size:12px;color:#777;}
.formWrap .inpTxt {width:100%;height:38px;padding:0 10px;border:1px solid #a6a6a6;font-size:18px;transition:border 0.2s;letter-spacing:0;}
.formWrap .inpTxt::placeholder {color:#777777;font-size:12px;}
.formWrap .inpTxt.lineType {border:0 none;border-bottom:1px solid #a6a6a6;}
.formWrap .inpTxt:hover, .formWrap .inpTxt:focus {border-color:#333;}
.formWrap .inpBtn {position:relative;display:inline-flex;align-items:center;}
.formWrap .inpBtn input {position:absolute;display:none;font-size:0;overflow:hidden;}
.formWrap .inpBtn.boxType {justify-content:center;height:38px;padding:0 24px;border:1px solid #a6a6a6;font-size:15px;text-align:center;color:#777;transition:all 0.2s;}
.formWrap .inpBtn.boxType.checked {border-color:#0934ff;color:#0934ff;}
.formWrap .inpBtn.smType {font-size:15px;color:#777;}
.formWrap .inpBtn.smType::before {content:"";display:block;width:16px;height:16px;margin-right:6px;outline:1px solid #a6a6a6;border:2px solid #fff;box-sizing:border-box;}
.formWrap .inpBtn.smType.checked::before {background-color:#0934ff;}
.formWrap .inpBtn.smType + .addTxt {display:inline-block;margin-left:10px;line-height:22px;vertical-align:top;}
.formWrap .rowList {display:flex;flex-wrap:wrap;margin:-8px 0 0;}
.formWrap .rowList li {display:inline-flex;width:50%;padding:8px 0;align-items:center;}
.formWrap .rowList li .title {flex:none;width:120px;padding-right:10px;}
.formWrap .rowList li .inpTxt {flex:none;width:250px;}
.formWrap .rowList li:nth-child(even) {justify-content:flex-end;}
.formWrap .checkgroup {display:flex;flex-wrap:wrap;}
.formWrap .checkgroup li {flex:none;display:inline-flex;align-items:center;}
.formWrap .checkgroup li:last-child {flex:auto;}
.formWrap .checkgroup li + li {margin-left:20px;}
.formWrap .checkgroup li .addInput {flex:auto;display:inline-flex;align-items:center;}
.formWrap .checkgroup li .addInput .txt {display:inline-block;padding:0 12px;font-size:18px;color:#777;}
.formWrap .checkgroup li .addInput input.lineType {height:40px;padding:0;}
.formWrap .formSection {margin-top:40px;}
.formWrap .btnGroup {margin-top:70px;}
.formWrap .btnGroup .btnBase {width:190px;height:50px;font-size:21px;padding:0;}
.formWrap .btnGroup .btnBase:hover {border-color:#05166a;background-color:#05166a;}

.contactArea {padding-bottom:50px;}
.contactArea .txt {font-size:20px;}
.contactArea .mail {display:block;font-size:50px;font-weight:900;letter-spacing:-3px;line-height:1.2;}
.contactArea .mail a {display:inline-block;vertical-align:top;}

.footer .inner {display:flex;align-items:center;width:900px;padding:34px 32px 200px;border-top:3px solid #000;}
.footer .logo {display:block;width:100px;height:14px;background-image:url(../images/logo_b.svg);}
.footer .copyright {font-size:12px;font-weight:200;line-height:1.5;letter-spacing:0;}
.footer .socialLink {margin-left:auto;}
.footer .socialLink li + li {margin-left:4px;}
.footer .socialLink a {width:30px;height:30px;background-color:#fff;background-position:center;background-repeat:no-repeat;background-size:contain;}
.footer .socialLink .linkYT {background-image:url(../images/icon_yt.svg);}
.footer .socialLink .linkIG {background-image:url(../images/icon_ig.svg);}
.footer .socialLink .linkFB {background-image:url(../images/icon_fb.svg);}
.footer .btnTop {display:block;position:absolute;bottom:100%;right:16px;width:50px;height:50px;font-size:0;background:url(../images/icon_top.png) no-repeat center;background-size:16px;}

@media (max-width:1024px) {
  .inner {max-width:100%;padding-left:60px;padding-right:60px;}
  .vodArea .logo {width:285px;height:35px;}
  .imgBox {left:initial;width:100%;transform:none;}
  .imgBox.slide {right:0;bottom:0;height:100%;background-position:bottom right -310px;}
  .imgBox.slide + .inner .body1,
  .imgBox.slide + .inner .headline2 {padding-right:160px;}
  .imgBox.headphone {top:0;left:0;background-image:url(../images/img_headphone_s.png);background-position:0 0;}
  .imgBox.turntable {right:0;background-image:url(../images/img_turntable_s.png);background-position:top right;}
  .section section.section2-2 {padding-top:100px;padding-left:300px;}
  .footer .inner {width:100%;}
  .formWrap .rowList {justify-content:space-between;}
  .formWrap .rowList li {flex:none;width:48%;padding:0 0 20px;margin:0;display:block;}
  .formWrap .rowList li .title {margin-bottom:2px;}
  .formWrap .rowList li .inpTxt {width:100%;}
  .formWrap .checkgroup li {margin-right:10px;margin-bottom:8px;}
  .formWrap .checkgroup li + li {margin-left:0;}
  .processWrap {max-width:830px;margin:60px auto 0;}
  .processWrap ol {padding:0;}
  .processWrap ol li:nth-child(5) {width:33.33334%;margin-left:33.33334%;text-align:center;}
}
@media (max-width:900px) {
  .processWrap .headline2 {left:3%;width:33.33334%;font-size:8vw;}
  .processWrap .circleBox {position:relative;width:26vw;height:26vw;}
  .processWrap .circleBox p {position:absolute;font-size:3vw;}
}
@media (max-width:720px) {
  .popupWrap .popupBox {width:80%;max-width:240px;min-height:initial;padding:20px 10px 30px;border-radius:4px;}
  .popupWrap .popupBox .txt {font-size:14px;}
  .popupWrap .popupBox .btnGroup {margin-top:12px;}
  .popupWrap .popupBox .btnGroup .btnBase {width:80px;height:30px;padding:0 0 2px;font-size:13px;letter-spacing:2px;}
  .inner {padding-left:20px;padding-right:20px;}
  .btnBase {min-width:70px;height:24px;border-width:1px;font-size:11px;padding:0 14px;}
  .btnGroup {margin-top:16px;}
  .btnGroup .btnBase + .btnBase {margin-left:8px;}
  .section section {padding:50px 0 60px;}
  .section section.section2-1 .body1 {padding-right:20%;}
  .section section.section2-2 {height:auto;padding:50px 0;padding-left:40%;}
  .section section.section2-3 {padding:70px 0 80px;}
  .section section.section2-3 .body1 {padding-right:20%;}
  #pageS01 .headline2 {padding-right:20px;}
  #pageS01 section:not(:last-child) {padding-bottom:130px;}
  .imgBox {left:initial;width:100%;transform:none;}
  .imgBox.slide {right:0;bottom:0;height:100%;background-image:url(../images/img_slide_s2.png);background-position:bottom right;background-size:390px;}
  .imgBox.slide + .inner .body1 {padding-right:80px;}
  .imgBox.headphone {height:209px;top:0;left:0;background-image:url(../images/img_headphone_s2.png);background-position:0 0;background-size:153px;}
  .imgBox.turntable {height:215px;bottom:-140px;right:0;background-image:url(../images/img_turntable_s2.png);background-position:top right;background-size:183px;}
  .headline1 {padding-top:0;margin-bottom:26px;font-size:42px;letter-spacing:-2px;}
  .headline2 {font-size:22px;letter-spacing:-1.6px;}
  .body1 {margin-top:16px;font-size:13px;line-height:1.4;letter-spacing:-0.5px;word-break:keep-all;}
  .body1 b {display:block;}
  .vodArea .logo {display:none;}
  .header .inner {height:54px;}
  .header .inner h1 {margin:0 auto;}
  .header nav {display:none;position:absolute;width:0;overflow:hidden;}
  .processWrap {max-width:360px;margin:0 auto;}
  .processWrap .headline2 {left:10px;font-size:28px;letter-spacing:-2px;}
  .processWrap ol li {padding:8px 4px;}
  .processWrap ol li:nth-child(4) .circleBox::after {margin-left:-15px;}
  .processWrap ol li:nth-child(3) .circleBox::after,
  .processWrap ol li:nth-child(5) .circleBox::after {width:1px;height:30px;}
  .processWrap .circleBox {position:static;width:100px;height:100px;padding:0;}
  .processWrap .circleBox::after {width:30px;height:1px;margin-left:-15px;}
  .processWrap .circleBox.active {border-width:2px;}
  .processWrap .circleBox p {font-size:14px;letter-spacing:-0.4px;}
  .msgWrap {padding:80px 0 20px;}
  .msgWrap .txt {font-size:17px;letter-spacing:-1px;}
  .msgWrap .txt p {margin-bottom:15px;}
  .msgWrap .txt span {font-size:17px;}
  .formWrap {margin-top:40px;}
  .formWrap .title {font-size:14px;}
  .formWrap .cont {padding:6px 0 0;}
  .formWrap .inpTxt {height:34px;font-size:14px;}
  .formWrap .inpBtn.boxType {height:26px;padding:0 12px;font-size:12px;}
  .formWrap .inpBtn.smType {font-size:13px;}
  .formWrap .inpBtn.smType + .addTxt {margin-left:0;padding-top:3px;font-size:10px;line-height:1.48;}
  .formWrap .txtList {font-size:12px;}
  .formWrap .txtList li {text-indent:-12px;padding-left:12px;}
  .formWrap .checkgroup li .addInput .txt {padding:0 4px;font-size:12px;}
  .formWrap .checkgroup li .addInput input.lineType {height:26px;}
  .formWrap .btnGroup {margin-top:40px;text-align:center;}
  .formWrap .btnGroup .btnBase {width:160px;height:40px;margin:0 auto;font-size:14px;}
  .contactArea {padding:0 20px 50px;}
  .contactArea .txt {font-size:12px;}
  .contactArea .mail {font-size:24px;letter-spacing:-1px;}
  .footer .inner {border-width:2px;padding:18px 16px 60px;}
  .footer .btnTop {right:0;background-size:20px;}
  .footer .logo {width:70px;height:10px;}
  .footer .copyright {margin-top:2px;font-size:8px;}
  .footer .socialLink {font-size:0;}
  .footer .socialLink a {width:20px;height:20px;}
}