@charset "UTF-8";
/* @media all and (min-width:1025px) and (max-width:1200px){
	.section{ padding:0 90px; }
	.scroll-down{ left:80px; }
	.about-list-area{ padding:0 0; }
}

@media all and (min-width:768px) and (max-width:1024px){
	html,body{ font-size:6px; }
	.section{ padding:0 60px; }
	.circle{ display:none; }
	.circle-follow{ display:none; }
	.txtbox{ display:inline; padding:0 0.8rem;}
	.scroll-down{ left:60px; }
}

@media all and (min-width:320px) and (max-width:767px){
	html,body{ font-size:4px; }
	.section{ padding:0 30px; }
	.scroll-down{ left:30px; }


	.header-holder .logo a{ width:60px; left:30px; }
	.circle{ display:none; }
	.circle-follow{ display:none; }

	.btn-navbar{ top:40px; right:5px; width:24px; height:24px; }
	.hamburger{ width:12px; }
	.hamburger:before{ width:20px; top:-9px; }
	.hamburger:after{ width:20px; top:9px; }

	.text-eng br{ display:none; }
	.works-slider .swiper-slide{ max-width:100%; }
	.txtbox{ display:inline; }
	#footer .f-left{ float:none; }
	#footer .f-right{ float:none; margin-top:15px; }

	

} */

/********************************************************************************************************************/

/* 해상도 1200 이하 */

/********************************************************************************************************************/

@media (max-width: 1200px) {
    /* common */
    .section {
        padding: 0 60px;
    }
    .scroll-down {
        left: 60px;
    }
    /* about */
    .about-list-area {
        padding: 0;
    }
    .about-parallax {
        padding: 30rem 0 30rem;
    }
    /* works */
    .works-box .works-inner .bg img {
        width: 100%;
        height: 100%;
    }
}

/********************************************************************************************************************/

/* 해상도 1024 이하 */

/********************************************************************************************************************/

@media (max-width: 1024px) {
    /* common */
    html,
    body {
        font-size: 8px;
    }
    .circle {
        display: none;
    }
    .circle-follow {
        display: none;
    }
    .txtbox {
        display: inline;
        padding: 0 0.8rem;
    }
    .scroll-down {
        left: 60px;
    }
    .scroll-txt {
        display: none;
    }
    /* works */
    .works-box:hover .front {
        transform: rotateY(0);
    }
    .works-box .back {
        display: none;
    }
    .works-box .works-inner {
        height: auto;
        padding: 0;
    }
    .works-box .works-inner .bg {
        position: relative;
    }
    .works-box .works-inner .bg img {
        width: 100%;
        height: auto;
    }
    /* view-controller */
    .view-controller.on {
        bottom: 50px;
    }
    .view-controller a span {
        display: none;
    }
}

/********************************************************************************************************************/

/* 해상도 768 이하 */

/********************************************************************************************************************/

@media (max-width: 768px) {
    /* common */
    html,
    body {
        font-size: 6px;
    }
    .section {
        padding: 0 30px;
    }
    .header-holder .logo a {
        width: 60px;
        left: 30px;
    }
    .btn-navbar {
        top: 40px;
        right: 5px;
        width: 24px;
        height: 24px;
    }
    .hamburger {
        width: 12px;
    }
    .hamburger:before {
        width: 20px;
        top: -9px;
    }
    .hamburger:after {
        width: 20px;
        top: 9px;
    }
    /* navigation */
    #navigation .container-fluid {
        padding-left: 0;
    }
    #navigation .container-fluid .col-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }
    #navigation .container-fluid .col-6:first-child {
        margin-top: 70px;
    }
    .nav-info-wrapper .nav-info-inner {
        float: none;
    }
    .nav-info-wrapper .nav-info-inner:before {
        display: none;
    }
    .nav-menu-list li a {
        font-size: 45px;
        line-height: 60px;
    }
    .nav-info-wrapper .nav-txt {
        display: none;
    }
    .nav-content .row {
        padding-bottom: 30px;
    }
    /* footer */
    #footer .f-left {
        float: none;
    }
    #footer .f-right {
        float: none;
        margin-top: 15px;
    }
    /* sub 공통 */
    .scroll-down {
        left: 30px;
    }
    .sub-visual-wrap .sub-tit-area {
        margin-top: -20px;
    }
    .sub-visual-wrap .sub-tit-area h2 {
        font-size: 10rem;
        line-height: 10rem;
    }
    /* about */
    .about-list .row .col-4 .info-list>li .txt li {
        font-size: 13px;
    }
    /* contact */
    .contact-area {
        display: block;
    }
    .contact-info {
        flex-basis: 100%;
    }
    .contact-inpt {
        flex-basis: 100%;
        margin-top: 15rem;
    }
    .contact-info .info li+li {
        margin-top: 6px;
    }
    .contact-info .btn-arr {
        font-size: 14px;
        background-size: 172px auto;
    }
    .contact-inpt li label {
        font-size: 14px;
    }
    .contact-inpt li a {
        padding-right: 30px;
        font-size: 14px;
        background-size: 20px auto;
    }
    .contact-inpt li input {
        font-size: 14px;
    }
    /* works */
    .works-list li {
        width: 50%;
    }
    .sub-visual-wrap.change.case2 {
        height: 30vh;
    }
    .works-sec-info .works-info dt {
        font-size: 14px;
    }
    .works-sec-info .works-info dd {
        font-size: 14px;
    }
    .works-sec-overview h4 {
        font-size: 14px;
    }
    .works-sec-overview p {
        font-size: 13px;
        line-height: 22px;
    }
    .works-sec-overview p br {
        display: none;
    }
    .txt-line .txt-mask {
        display: none;
    }
    .txt-line .txt {
        margin-left: 0;
    }
    .works-sec-slide {
        margin: 30px 30px 0 30px;
    }
    .works-sec-slide .works-sec-frame.show {
        padding: 4% 0;
    }
    .works-sec-slide .works-sec-frame.show .mobile {
        left: 20px;
    }
    .works-sec-slide .works-sec-frame.show .mobile .swiper-slide {
        margin-right: 27.65%;
    }
    /* view-controller */
    .view-controller a em {
        font-size: 2rem;
    }
    .view-controller a.btn-prev {
        padding-left: 7rem;
    }
    .view-controller a.btn-next {
        padding-right: 7rem;
    }
}

/********************************************************************************************************************/

/* 해상도 580 이하 */

/********************************************************************************************************************/

@media (max-width: 580px) {
    .scroll-down span {
        font-size: 13px;
    }
    /* about */
    .about-list .col-4 {
        max-width: 100%;
        padding: 0;
        flex: 0 0 100%;
    }
    .about-list .col-4+.col-4 {
        margin-top: 8rem;
    }
    .about-list .row .col-4 .desc {
        font-size: 13px;
    }
    /* works */
    .tabs li+li {
        margin-left: 35px;
    }
    .tabs li a {
        font-size: 14px;
    }
    .tabs li a:hover {
        padding-right: 15px;
        background-size: 15px auto;
    }
    .tabs li a.active {
        padding-right: 15px;
        background-size: 15px auto;
    }
    .works-sec-info {
        display: block;
    }
    .works-sec-info .works-info {
        display: table;
        width: 100%;
        margin-top: 10px;
    }
    .works-sec-info .works-info dt {
        display: table-cell;
        width: 80px;
    }
    .works-sec-info .works-info dd {
        display: table-cell;
    }
    .works-sec-info .works-info+dl {
        margin-left: 0;
    }
    .works-sec-desc {
        padding: 0 15px;
    }
    .works-sec-desc p br {
        display: none;
    }
    .works-sec-slide .works-sec-frame.show .mobile.black:after {
        box-shadow: 0 0 0 10px #232425;
    }
    /* view-controller */
    .view-controller.on {
        bottom: 70px;
    }
    .view-controller a.menu {
        margin: 0 30px;
    }
    .contact-map #map {
        height: 300px !important;
    }
}

/********************************************************************************************************************/

/* 해상도 375 이하 */

/********************************************************************************************************************/

@media (max-width: 375px) {
    /* common */
    html,
    body {
        font-size: 4px;
    }
    /* contact */
    .works-slider .swiper-slide {
        max-width: 100%;
    }
    .contact-info h4 {
        font-size: 16px;
    }
    .contact-info span {
        width: 25px;
        height: 25px;
        background-size: 25px auto;
    }
    .contact-info .info li em {
        font-size: 13px;
        line-height: 18px;
    }
    .contact-info .info li p {
        font-size: 13px;
        line-height: 18px;
    }
    /* works */
    .tabs li {
        width: 25%;
    }
    .tabs li+li {
        margin-left: 0;
    }
    .tabs li a:hover,
    .tabs li a.active {
        padding-right: 0;
        background: none;
    }
    .works-list li {
        width: 100%;
    }
    .works-sec-desc p {
        font-size: 17px;
    }
    .works-sec-slide .works-sec-frame.show .mobile {
        left: 15px;
    }
    .works-sec-slide .works-sec-frame.show .mobile .swiper-slide {
        margin-right: 33%;
    }
    /* view-controller */
    .view-controller a.btn-prev {
        padding-left: 10rem;
    }
    .view-controller a.btn-next {
        padding-right: 10rem;
    }
}

/********************************************************************************************************************/

/* 해상도 320 이하 */

/********************************************************************************************************************/

@media (max-width: 320px) {
    .works-sec-slide .works-sec-frame.show .mobile {
        left: 15px;
    }
    .works-sec-slide .works-sec-frame.show .mobile .swiper-slide {
        margin-right: 30%;
    }
    /* view-controller */
    .view-controller a.btn-prev {
        padding-left: 8rem;
    }
    .view-controller a.btn-next {
        padding-right: 8rem;
    }
    .view-controller a em {
        font-size: 2.7rem;
    }
    .view-controller a.menu {
        margin: 0 20px;
    }
}